How to create a plugin for CKEditor?

CKEditor is WYSIWYG happening editor in market right now which is based on plugin model. Being a plugin model its really helpful tool for web programmers.

Lets create a simple plugin here which fetches information from SERVER to browser.

Before start writing the code we need to decide whether plugin should run behind the scene like auto spell check or whether we should display a button in CKEditor menu or in right click menu. Even custom we can create dialog box and inside dialog we can push html controls like textbox, dropdown, etc for taking user inputs.

We are going to create a  plugin with name newplugin.

1. First create a directory inside plugins directory for CKEditor with plugin name newplugin.
2. Create/Download/Rename png image file with 16×16 size with name newplugin.png and save it inside newplugin folder.
3. Create a javascript file plugin.js where we will write the behavior. Following is the code one can use create a simple plugin,

(function() {
var o = { exec: function(p) {
url = baseUrl + "/GetSomeData";
$.post(url, function(response) {
alert(response)
});
}
};
CKEDITOR.plugins.add('newplugin', {
init: function(editor) {
editor.addCommand('newplugin', o);
editor.ui.addButton('newplugin', {
label: 'newplugin',
icon: this.path + 'newplugin.png',
command: 'newplugin'
});
}
});
})();

1. Now our plugin is ready to use. Add this code when instantiate CKEditor for including the plugin in instance,

   var ckEditorInstance = CKEDITOR.replace('DivIdToReplaceAsCKEditor',{
   toolbar: [
   ['Bold'], ['Italic'], ['newplugin'],
   ]
   });

   Or add it in CKEditor config file as below

   CKEDITOR.editorConfig = function(config) {
   config.toolbar = [
   ['Bold'],['Italic'],['newplugin']
   ]
   };
   

Now lets go deeper and in to details on adding advanced features in CKEditor plugin which is really useful for developers.

Right Click Option

For making newplugin to come in CKEditor right click menu add the following  code in plugin.js inside init function,

if (editor.addMenuItems)
ditor.addMenuItem("newplugin", {
label: 'New Plugin',
command: 'newplugin',
group: 'clipboard', order: 9
});
if (editor.contextMenu)
editor.contextMenu.addListener(function() {
return { "newplugin": CKEDITOR.TRISTATE_OFF };
});

By default on CKEditor right click the  cut, copy, & paste options are displayed and to add our newplugin we need to add the above code and give order parameter based on which menu list will be ordered.
We attach context menu event & menu state can be altered based on requirement. For instance the Cut, Copy, Paste buttons in right click menu and CKEditor menu will be enabled/disabled based on current context. For our newplugin we always have CKEDITOR.TRISTATE_OFF .

Localization

For achieving localization on labels used in newplugin check lang folder and add corresponding key,value entry in language file(en.js, ja.js,..etc) .
We can access the value by,

editor.lang.newplugin.title

and based on CKEditor instance language, value will be pulled from corresponding language file.

Silent Plugin

See the below code for adding plugins which runs behind the scene. silentplugin will insert a text whenever user type enter key in a CKEditor.

editor.on('key', function(e) {
if (e.data.keyCode == "13") {
if (editorInstance) {
CKEDITOR.instances[editorInstance.name].insertHtml('You clicked enter');
}
};
});

Above code will attach the key event listener for editor and it checks the whether key pressed is enter key. Spell checker is the best plugin example for similar scenario.

Custom Dialogbox
Custom dialog box is  advanced, little complicated but very useful feature in CKEditor.
Usually applicable in scenarios for taking inputs from user or to display table properties, image properties or even for showing alert windows or about windows.

Following is the dialogplugin code for activating the plugin,

editor.addCommand('dialogplugin',
new CKEDITOR.dialogCommand('dialogplugin'));
editor.ui.addButton('dialogplugin', {
label: editor.lang.about.title,
command: 'dialogplugin',
icon: this.path + 'dialogplugin.png'
});
CKEDITOR.dialog.add('dialogplugin', this.path + 'dialogs/dialogplugin.js');

And inside dialogplugin.js we have the code to format dialog window and add the required elements, events, etc.

title: 'Message For You',
minWidth: CKEDITOR.env.ie ? 150 : 120,
minHeight: 100,
contents:[{
id: 'dialog_plugin',
expand: true,
padding: 0,
elements:
[{
type: 'html',
html: '<p>' + 'This is the dialog plugin message :)'
+ '</p>'
}]
}]

Also we have events like OnShow, OnOk, OnCancel which is very useful for developers for validation, getting values from elements inside dialog box, changing the state inside editor,..etc.
For retrieving value from element inside dialog box we can use,

dialog.getValueOf('dialog_plugin', 'element_id');

dialog_plugin is the parent element id and element_id is the element id(textbox, select,..etc)

Check demo and source code for detailed implementations of plugins discussed here. We have covered the major features here, rest play around with it for more options.
Ping me for any clarifications or doubts.

CKEDITOR 4.0 is the latest version and i have added CKEDITOR 4.0 example for demo and download.