Back to documentation

How to install CKEditor plugin from CDN

The CDN version of CKEditor is not hosted on your website, so installing plugins on it has certain differences from the basic plugin installation procedure. Here is an example of how you can install JS+ Image Editor plugin to the CDN version of CKEditor, step by step.

Step 1: loading CKEditor

To use the CDN version of CKEditor you should load it first. Place the following code to the <head> section of your HTML code:

<script src="//cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

For the detailed descriptions of available version numbers and editions of CKEditor to load, please refer to the official documentation here: https://cdn.ckeditor.com/

Step 2: copying the plugin

Now, let’s install JS+ Image Editor plugin. First of all, you need to upload the contents of the plugin archive to any folder on your website. Although, it is a good idea to name the folder so that you knew it holds CKEditor plugins. Let’s name it as ckeditor/plugins for the sake of our example. You should end up with the following path then:

ckeditor/plugins/jsplus_image_editor

Step 3: adding external plugin to CKEditor

Now, we need to tell CKEditor to load the plugin from the above folder. Add the following code to your HTML code above the line where CKEditor replaces the standard control:

<textarea name="editor1"></textarea>
...
<script>
CKEDITOR.plugins.addExternal( 'jsplus_image_editor', '/ckeditor/plugins/jsplus_image_editor', 'plugin.js' );
CKEDITOR.replace('editor1');
...
</script>

Note that we call the addExternal function before replace here. See below why.

Step 4: adding the toolbar button

If you install JS+ Image Editor to the hosted version of CKEditor, you make modifications to the config.js file. However, when using the CDN version you can’t directly edit this file. In this case we create a custom config file locally and tell CKEditor to use it.

Change the above code as follows:

CKEDITOR.replace('editor1', { customConfig: '/ckeditor/custom_config.js'});

This line tells CKEditor to use a custom config file located at the specified path. Now, create the 'custom_config.js' file and place the below code there:

CKEDITOR.editorConfig = function( config ) {
    
config.language = 'en';

config.extraPlugins = 'jsplus_image_editor';

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 custom config file commands CKEditor to load an extra plugin (or plugins if you have many of them). Then, it creates toolbar buttons using a full toolbar template and adds a JS+ Image Editor button into a new group.

As mentioned above, you should call the addExternal function first, before replace. This is required, because when we load our custom config file, CKEditor should already know where to load the plugin.

Upload changes to your website. That’s it!