4.5.2. Customizing CKEditor

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:

  1. Open the webapps/CommonsResources/eXoConfig.js configuration file of CKEditor.

  2. 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.

config.toolbar_Default = [
  ['Maximize', 'ShowBlocks'],
] ;
config.toolbar_MyToolbar =
 ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
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.

  1. Create a directory named timestamp in the ckeditor/plugins folder.

  2. 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.

  3. 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

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus