CKEditor is a full-featured WYSIWYG editor, but not all of its options are needed in all cases. Therefore, the toolbar customization is one of the most common and required tasks when dealing with CKEditor.
Toolbar Definition is a JavaScript array which contains the elements to be displayed in all toolbar rows available in the editor. In eXo Platform, the toolbar definition is placed in the /webapps/eXoStaticResources/eXoConfig.js file. The following code snippet contains the default CKEditor toolbar set in eXo Platform.
config.toolbar_Default = [
['Source','Templates'],
['Cut','Copy','PasteText','-','SpellCheck'],
['Undo','Redo','-','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike'],
['NumberedList','BulletedList'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','SpecialChar'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks'],
['Style','Format','Font','FontSize']
] ;
Add a new toolbar in eXo Platform
To add a new toolbar in eXo Platform, open the /webapps/eXoStaticResources/eXoConfig.js configuration file of CKEditor, then add the following code snippet to it.
config.toolbar_MyToolbar =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
Show the newly added toolbar
To show the newly added toolbar, you have to add it to a field of a WCM template. For example, to show the new toolbar on the content field of HTML file, you need to modify the dialog template of HTML file as follows:
String[] fieldSummary = ["jcrPath=/node/jcr:content/jcr:data", "", "options=toolbar:MyToolbar, noSanitization"] ;
uicomponent.addRichtextField("contentHtml", fieldSummary) ;
By adding a new HTML file, you will see the new toolbar (MyToolbar) on the content field:
