CKEDITOR FAQ

CKEditor.replace('divcomponentid', {
        extraPlugins:'newplugin',
        toolbar:[
            ['Bold', 'Italic', 'Underline'],
            ['anchor','newplugin']
            ]
})

newplugin is newly created plugin which we need in the instance created.
Or if you are using custom config file for loading CKEditor instance use,

CKEditor.editorConfig = function(config) {
    config.extraPlugins = "newplugin";
    config.toolbar =
    [
        ['Bold', 'Italic', 'Underline'],
['anchor','newplugin']
    ];
};

Square brackets ‘[]’ are used to group the plugins together in CKEditor menu. Order of the plugins in menu are decided by order in which you have given(comma

seperated) while creating instance.

CKEditor.replace('divcomponentid', {
        removePlugins: 'elementspath,Cut,Copy,Paste'
        toolbar:[
            ['Bold', 'Italic', 'Underline']
            ]
})

And if you are using custom config file for creating CKEditor instance use,

CKEditor.editorConfig = function(config) {
    config.removePlugins= "elementspath,Cut,Copy,Paste";
    config.toolbar =
    [
         ['Bold', 'Italic', 'Underline']
    ];
};

Here we are removing 4 default plugins (elementspath,Cut,Copy,Paste) from CKEditor instance.

CKEditor.replace('divcomponentid', {
        language: 'ja'
})

And if you are using custom config file for creating CKEditor instance use,

CKEditor.editorConfig = function(config) {
    language = "ja";
};

Even one can use javascript variable to set language file to make localization option dynamic.

Assume we have created a fresh plugin newplugin and need to acheive localization for English(en.js) and Japanese(ja.js) lanuages. First openen.js and,

CKEditor.lang['en'] =
{
-----
source : 'Source',
-----
newplugin : 'New Plugin',
-----
}

Now open ja.js

CKEditor.lang['ja'] =
{
-----
source : 'Source',
-----
newplugin : '新しいプラグインを',
-----
}

And inside your plugin.js where plugin behaviour and command is defined we will use variable editor.lang.newplugin to access localized

version of label text.

-----
CKEditor.plugins.add('newplugin', {
  init: function(editor) {
  -----
  editor.ui.addButton('newplugin',
     {
       label: editor.lang.newplugin
  });
-----
});
-----

Similarly we can open required language js files and add the corresponding label value.

CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
        -----
            editor.ui.addButton('newplugin', {
                icon: this.path + 'newplugin.png',
                command: 'newplugin'
            });
	    
-----
});

CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
            if (editor.addMenuItems)
			editor.addMenuItem('newplugin', {
			command: 'newplugin',
                        group: 'clipboard',
                        order: 13
		    });
	    
-----
});

group is for combining the related operations, for this plugin we are adding it to default clipboard menu lists(cut,copy,paste) and

order will decide the order in which plugin are displayed when right clicked.

CKEDITOR.editorConfig = function(config) {
	config.menu_groups = config.menu_groups + ',newgroup';
};

Order of the group is decided on where we append the new group name. if you add the new group name in front of existing groups then display priority will be

given to the group or if you append at end as shown in this example it will be the default priority list.
And ordering inside the group is decided by property(integer) order inside plugin.js

-----
CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
            if (editor.addMenuItems)
			editor.addMenuItem('newplugin', {
			command: 'newplugin',
                        group: 'newgroup',
                        order: 1
		    });
	    
-----
});

CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
        -----
            editor.ui.addButton('newplugin', {
                icon: this.path + 'newplugin.png',
                command: 'newplugin'
            });

-----
});

this.path points to plugin folder path.

-----
CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
            editor.addCommand('newplugin', o);
            if (editor.addMenuItems) editor.addMenuItem("newplugin", { label: "New Plugin", command: 'newplugin', group: 'newgroup', order: 4 });
            if (editor.contextMenu){
		editor.contextMenu.addListener(function() {
                   if (condition)return null;
               	    return { "newplugin": CKEDITOR.TRISTATE_OFF };
            	});
	    }
        }
    });

In the above code based on the condition we add in if loop we decide whether the context menu is in visible or hidden state. we return null if we don’t need the context menu to display, otherwise return { “newplugin”: CKEDITOR.TRISTATE_OFF }. condition may be boolean value or expression, we can even check for a specific tag where the right click is done and decide whether to show/hide context menu.

-----
 CKEDITOR.plugins.add('newplugin', {
        init: function(editor) {
            CKEDITOR.config.mynewproperty = null;//Initializing the property
-----
}
});

Above code will be executed when newplugin is loaded and CKEDITOR.config.mynewproperty is initialized with null value here.After that we can access the variable using CKEDITOR.config.mynewproperty or update the variable in config.js or anywhere in code for later use.

 var editorinstance = CKEditor.replace('divcomponentid');
 editorinstance.on('blur', function() { alert('blur happened')})

So after the editor gets activated and then if we lose focus on editor(blur), an alert message will be displayed.
Some of the other events CKEDITOR works with are,

• key : activated on key press
• mode : activated when state of Editor changes

  editor.on('mode', function() {  
      if (editor.mode == 'wysiwyg') alert('edit mode');
      else if (editor.mode == 'readonly')alert('read only');
  });

  Here an alert window when editor status changes to readonly or edit.

• insertHtml : activated whenever an html content is inserted to editor.
• insertElement : activated whenever an html element is inserted to editor.
• selectionChange : activated CKEDITOR menu dropdown is changed.
• contentDom : activated when editor is loaded.
• focus : activated when editor is on focus.

There are other various events for CKEDITOR, if we open ckeditor.js, will find more events.