Foundation Tools
for CKEditor & TinyMCE
Overview
CKEditor installation TinyMCE installation
16 in 1
Includes products:
Foundation Include CSS/JS plugin Foundation Show Blocks plugin Foundation Advanced Blocks plugin Foundation Block Configuration plugin Foundation Icons plugin Foundation Templates plugin Foundation Button plugin Foundation Image Gallery plugin Foundation Label plugin Foundation Alert plugin Foundation Move Column plugin Foundation Move Row plugin Foundation Delete Column plugin Foundation Delete Row plugin Foundation Breadcrumbs plugin Foundation Add Row plugin
Installing CKEditor to WordPress Installing CKEditor to Joomla Installing CKEditor to Drupal 7 How to install CKEditor plugin from CDN How to install a plugin to CKEditor How to adjust CKEditor settings Include Foundation to CKEditor/TinyMCE .NET uploader configuration File and Image uploader plugins FAQ Styling Image Gallery Attach images to comments in Drupal CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Foundation Tools logo
Get Foundation Tools inside
31 in 1
Foundation Bundle
$59

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!