Foundation Table Tools
for CKEditor & TinyMCE
Overview
CKEditor installation TinyMCE installation
16 in 1
Includes products:
Foundation Include CSS/JS plugin New Foundation Table Foundation Table Configuration Foundation Table Row Configuration Foundation Table Column Configuration Foundation Table Cell Configuration Move Foundation Table Column Move Foundation Table Row Insert Foundation Table Row Insert Foundation Table Column Insert Foundation Table Cell Delete Foundation Table Column Delete Foundation Table Row Delete Foundation Table Cell Merge Foundation Table Cells Split Foundation Table Cell
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 CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Foundation Table Tools logo
Get Foundation Table 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!