Bootstrap Table Tools
for CKEditor & TinyMCE
Overview
CKEditor installation TinyMCE installation Drupal 8 module
16 in 1
Includes products:
Bootstrap Include CSS/JS New Bootstrap Table Bootstrap Table Configuration Bootstrap Table Column Configuration Bootstrap Table Row Configuration Bootstrap Table Cell Configuration Insert Bootstrap Table Column Insert Bootstrap Table Row Insert Bootstrap Table Cell Move Bootstrap Table Row Move Bootstrap Table Column Delete Bootstrap Table Column Delete Bootstrap Table Row Delete Bootstrap Table Cell Merge Bootstrap Table Cells Split Bootstrap 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 Bootstrap to CKEditor/TinyMCE CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Bootstrap Table Tools logo
Get Bootstrap Table Tools inside
32 in 1
Bootstrap Bundle
$59
Bootstrap Table Tools logo
Get Bootstrap Table Tools inside
33 in 1
Bootstrap Full Bundle
$79

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!