Rich Text

January 1, 2017 - market research, Rolf Eckertz
CKEditor has been chosen. For smartphones the basic edition would be enough, for laptop, desktop and tablet the standard edition would be better. Solution should be to modify the toolbar at runtime.


CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others', groups: [ 'others' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'about', groups: [ 'about' ] }
];

config.removeButtons = 'Underline,Subscript,Superscript,Anchor,Maximize,Strike,Blockquote,Scayt';
};

A customization example is:

<script>
CKEDITOR.replace( 'editor1', {
// Define the toolbar groups as it is a more accessible solution.
toolbarGroups: [
{"name":"basicstyles","groups":["basicstyles"]},
{"name":"links","groups":["links"]},
{"name":"paragraph","groups":["list","blocks"]},
{"name":"document","groups":["mode"]},
{"name":"insert","groups":["insert"]},
{"name":"styles","groups":["styles"]},
{"name":"about","groups":["about"]}
],
// Remove the redundant buttons from toolbar groups defined above.
removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar'
} );

But it is also possible to work on the item level, sample from version 3 documentation http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

config.toolbar = 'Full';
 
config.toolbar_Full =
[
 { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
 { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
 { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
 { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
        'HiddenField' ] },
 '/',
 { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
 { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
 '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
 { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
 { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
 '/',
 { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
 { name: 'colors', items : [ 'TextColor','BGColor' ] },
 { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
 
config.toolbar_Basic =
[
 ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

http://docs.ckeditor.com/guides/dev_toolbar/toolbar_configurator_advanced.png 

- this is the picture of the actual items

Once again market research was done for two reasons:

CKEditor is not running on all platforms - that by design and will be fixed in the future, but this causes different functionality on different platforms.

And I want to offer more functions to the users and more comfort. The ideas come from an old distinction between unformated, semiformated and structured text. I documented the distinction more than 40 years ago and at that time used semiformated text.

Today I would like to use unformated text that can be automatically analyzed regarding structure keywords and that can be easily converted to structured text by paragraph or sentence with easy user interaction.

Additionally links shall be put to keywords - and in case of non-unique keywords a prompt dialog give a choice to the user.

Thats abstract - and it's targeted at formulation todo-lists or checklists in a very easy way.

http://socialcompare.com/en/comparison/javascript-online-rich-text-editors gives a good verview, specially regarding mobile ready there are not much alternatives

http://www.jqueryrain.com/demo/jquery-wysiwyg-editor/?utm_source=tuicool - 25 Tools

Textbox.io - very elegant, but expensive
https://github.com/shimataro/cazary - may be
http://wysiwygjs.github.io/ - scheint gut, aber sehr roh in der Dokumentation
http://jhtmlarea.codeplex.com/ - gut, Microsoft Public License (Ms-PL), sehr kompakt, zu testen, paste aus libreoffice ok, aber seit 2014 keine Weiterentwicklung, offene Struktur
http://premiumsoftware.net/cleditor/ - sieht auch sehr gut aus, hat einen guten Ansatz zur Erweiterung der Toolbar und der Funktionalität, Übernahme aus LibreOffice sieht gut aus. 

http://slatejs.org/#/rich-text?_k=8oifnv - scheint auch gut zu sein