How to install a plugin to CKEditor

Installing add-ons to CKEditor is pretty easy. All you need is the name of the plugin, sometimes the name of its toolbar button or buttons (typically it is the same as the name of the plugin). This manual is a step by step plugin installation instruction that uses JS+ Image Editor as an example.

You can host CKEditor on your server or use the CDN version. This manual fully explains installing to the hosted version since this option is more popular. On installing JS+ Image Editor plugin to the CDN version of CKEditor, use this article too. However, there are CDN-specific differences that you should look in this tutorial instead.

Here are steps to follow for proper plugin installation:

Step 1: Copying the plugin

Upload the contents of the plugin archive to ckeditor/plugins folder. Where ckeditor is the folder where CKEditor is uploaded to. You should end up with the following path then: ckeditor/plugins/jsplus_image_editor

Step 2: Turning on the plugin

In the ckeditor folder, find the config.js file. Add the following line to this file:

config.extraPlugins = 'jsplus_image_editor';

Here, we tell CKEditor to add jsplus_image_editor to the extraPlugins variable of the config.js file. This line effectively activates the plugin.

If the extraPlugins variable already holds values, add the name of the plugin after the comma instead:

config.extraPlugins = 'some_other_plugin,one_more_plugin,jsplus_image_editor';

Spaces are not allowed here. Plugin names must be separated with commas.

Alternatively, you can activate plugins by passing configuration variables as parameters of the CKEDITOR.replace() function. You can read more about this way to pass CKEditor configuration: Per instance CKEditor configuration.

Step 3: Toolbar configuration

Add the button of the plugin to CKEditor toolbar. Proper functioning of the JS+ Image Editor plugin just like most of other plugins requires a toolbar button. To add a plugin button to the toolbar, you need to add its description to the toolbar definition in config.js.

In most of typical cases (i.e. if you have the default toolbar, and the plugin does not use custom toolbar groups) the required button will be added to the toolbar automatically. So you only need to set the extraPlugins variable in the CKEditor configuration file as shown above.

In case you want more control over placement of buttons on the toolbar, please place this code to config.js too:

config.toolbar = 'custom';
config.toolbar_custom = [
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
    { name: 'tools', items: [ 'Maximize' ] },
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
    { name: 'others', items: [ '-' ] },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
    { name: 'styles', items: [ 'Styles', 'Format' ] },
    { name: 'about', items: [ 'About' ] },
    { name : 'new_group', items: ['jsplus_image_editor'] }
];

The code below shows how to add the plugin to the toolbar for CKEditor full edition. If you use other edition, the list of the buttons will be just a bit shorter.

Here is what we do. First, we assign a new toolbar name custom. Then, we add default contents (buttons and groups) to it and add a new toolbar group new_group holding one button item jsplus_image_editor to the CKEditor toolbar. We change the toolbar definition by adding the bolded line to it.

The name of the toolbar can be any you want (but avoid using special characters). You can place the bolded lines of code in other parts of the toolbar definition too.

To add multiple buttons to a toolbar (if you have more buttons of the plugins to place to the toolbar), specify their names in the items field:

{ name : 'new_group', items: ['jsplus_image_editor', 'jsplus_edit_tag'] }