How to add a plugin to CKEditor

The steps required to add a plugin to CKEditor are quite simple if you know how CKEditor is installed in your server. Let's see an example with the ImageToolbar plugin:

1. Copy the files

Extract the contents of the zip in you plugins directory, so it ends up like this:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               imagetoolbar\
                       plugin.js
                       docs\
                       icons\
               ...
        skins\
        themes\

 

2. Add the plugin to CKEditor

Use one of the following options:

2.1. Configuration in config.js

Now add the plugin in your config.js or custom js configuration file, adding a line like the following one:

config.extraPlugins = 'imagetoolbar';

If you're already using other extraPlugins, then you must add it to the end with a comma:

config.extraPlugins = 'imagesfromserver,imagetoolbar';

2.2. Inline configuration

If you prefer to add the plugin during the creation of the editor instead of changing the config.js, you can do it specifiying the extraPlugins of the initial configuration object:

CKEDITOR.replace( 'news', {
    extraPlugins: 'imagetoolbar'
} );

2.3. Use of cdn.ckeditor.com

In case that you're using the CDN version of CKEditor instead of uploading it to your server, then must specify the location of the plugin so that the editor can initialize correctly

// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'imagetoolbar', '/myplugins/imagetoolbar/', 'plugin.js' );

// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
    extraPlugins: 'imagetoolbar'
} );