5.5.2. Customizing CKEditor

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

Changing the CKEditor skin

You can change the CKEditor skin by adjusting a single configuration option. In eXo Platform, to change the CKEditor skin, do as follows:

Open the webapps/CommonsResources/eXoConfig.js configuration file of CKEditor.
Set up a skin for CKEditor. It may be the name of the skin folder inside the editor installation path, or the name and the path separated by a comma.
```
config.skin = 'kama';
config.skin = 'myskin,/customstuff/myskin/';
```
By default, CKEditor has 2 skins for users to select: kama, and moono. They are placed in the webapps/CommonsResources/ckeditor/skins folder.

Adding a new toolbar

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/CommonsResources/eXoConfig.js file. The following code snippet contains the default CKEditor toolbar set in eXo Platform:

config.toolbar_Default = [
  ['Source','Templates'],
  ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Find','Replace','SelectAll'],
  ['Undo','Redo','-','RemoveFormat'],
  ['Bold','Italic','Underline','Strike'],
  ['NumberedList','BulletedList'],
  ['Link','Unlink','Anchor'],
  ['Image','Flash','Table','SpecialChar'],
  ['TextColor','BGColor'],
  ['Maximize', 'ShowBlocks'],
  ['Style','Format','Font','FontSize']
] ;

To add a new toolbar in eXo Platform, add the following code to webapps/CommonsResources/eXoConfig.js:

config.toolbar_MyToolbar =
[
 ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

To show the newly added toolbar, you have to add it to a field of a 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", "", "validate=empty", "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:

Creating a basic plugin for CKEditor

It is assumed that you develop a timestamp plugin that inserts the current date and time into the editing area of CKEditor. The timestamp will be added after a user clicks a dedicated toolbar button. It uses the insertHtml function which can be easily adjusted to insert any other HTML elements into CKEditor.

Create a directory named timestamp in the ckeditor/plugins folder.
Create a plugin.js file that contains the plugin logic in timestamp folder. Also, you will create a toolbar icon for the plugin by adding an images folder and subsequently placing the timestamp.png file inside it.

Modify the plugin.js file in which you will write the behavior.

The following is the code used to create a simple plugin named timestamp:

CKEDITOR.plugins.add( 'timestamp',
{
 init: function( editor )
 {
  editor.addCommand( 'insertTimestamp',
   {
    exec : function( editor )
    {
     var timestamp = new Date();
     editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
    }
   });
  editor.ui.addButton( 'Timestamp',
  {
   label: 'Insert Timestamp',
   command: 'insertTimestamp',
   icon: this.path + 'images/timestamp.png'
  } );
 }
} );

To use the created plugin, plug it to CKEditor by adding the following codes to webapps/CommonsResources/eXoConfig.js:

(function() {CKEDITOR.plugins.addExternal('timestamp',CKEDITOR.eXoPath+'ckeditor/plugins/timestamp/','plugin.js');})();
  ...
  config.extraPlugins = 'content,insertGadget,insertPortalLink,acceptInline,cancelInline,onchange,helpBBCode,syntaxhighlight,timestamp';
  ...
  config.toolbar_MyToolbar = [
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About', 'Timestamp']
  ];

The following is the illustration of the Timestamp plugin added to the CKEditor:

See also