Installing and configuring CKEditor Bootstrap Full Bundle

You bought a Bootstrap Full Bundle license, downloaded it and now you need to integrate all these tools for maximum effect.
This article shows how to install these plugins and add them to CKEditor toolbar, and also helps you understand the specifics of editor configuration including the internal CKEditor that is used in Bootstrap Editor. In the end of this article, there is a link to an archive with CKEditor already configured as described in this manual.

Installation step by step

1. Copy files

First of all, copy all files from the archive into the folder where your CKEditor is. All the contents of the plugins folder in the archive should end up in the plugins folder of your CKEditor. The same is true for the skins folder.

2. Enabling plugins

Now, we need to tell CKEditor that we installed new plugins and want to load them upon startup of the editor. To do this, make some changes in the settings file of CKEditor - config.js.
According to the CKEditor manual, plugins are loaded by specifying them in the extraPlugins directive. The list of machine names of plugins can be found on the pages of corresponding products included into Full Bootstrap Bundle:

Bootstrap Editor installation
Bootstrap Tools installation
Bootstrap Table Tools installation

Merge all values together in extraPlugins and add this line to config.js:

config.extraPlugins = 'jsplusBootstrapInclude,jsplus_bootstrap_tools,jsplus_bootstrap_table_tools,jsplusBootstrapEditor';

3. Configuring toolbar

CKEditor starts, plugins are loaded, but the editor looks the same. This is because in CKEditor every plugin can have any number of toolbar buttons, from zero to infinity. Information about each button and place on the toolbar where it should be displayed must be passed to CKEditor manually. Let's configure our own toolbar holding only JS+ plugin buttons. Other buttons from the standard shipping of CKEditor can be added using the same steps. For example, we will add the "Source" button.

config.toolbar = [
    [
        'jsplusBootstrapEditor',
        'jsplusBootstrapEditorSelected'
    ],
    [
        'jsplus_bootstrap_button',
        'jsplus_bootstrap_icons',
        'jsplus_bootstrap_gallery',
        'jsplus_bootstrap_badge',
        'jsplus_bootstrap_label',
        'jsplus_bootstrap_breadcrumbs',
        'jsplus_bootstrap_alert'
    ],
    [
        'jsplus_show_blocks',
        '-',
        'jsplus_edit_col',
        'jsplus_bootstrap_row_add_up',
        'jsplus_bootstrap_templates',
        'jsplus_bootstrap_row_add_down',
        '-',
        'jsplus_bootstrap_col_move_left',
        'jsplus_bootstrap_col_move_right',
        'jsplus_bootstrap_delete_col',
        '-',
        'jsplus_bootstrap_row_move_up',
        'jsplus_bootstrap_row_move_down',
        'jsplus_bootstrap_delete_row'
    ],
    '/',
    [
        'jsplus_bootstrap_table_new',
        'jsplus_bootstrap_table_conf',
        '-',
        'jsplus_bootstrap_table_add_row_up',
        'jsplus_bootstrap_table_add_row_down',
        'jsplus_bootstrap_table_row_conf',
        'jsplus_bootstrap_table_row_move_up',
        'jsplus_bootstrap_table_row_move_down',
        'jsplus_bootstrap_table_delete_row',
        '-',
        'jsplus_bootstrap_table_add_col_left',
        'jsplus_bootstrap_table_add_col_right',
        'jsplus_bootstrap_table_col_conf',
        'jsplus_bootstrap_table_col_move_left',
        'jsplus_bootstrap_table_col_move_right',
        'jsplus_bootstrap_table_delete_col',
        '-',
        'jsplus_bootstrap_table_add_cell_left',
        'jsplus_bootstrap_table_add_cell_right',
        'jsplus_bootstrap_table_cell_conf',
        'jsplus_bootstrap_table_merge_cells',
        'jsplus_bootstrap_table_merge_cell_right',
        'jsplus_bootstrap_table_merge_cell_down',
        'jsplus_bootstrap_table_split_cell_hor',
        'jsplus_bootstrap_table_split_cell_vert',
        'jsplus_bootstrap_table_delete_cell'
    ],
    [
        'Source'
    ]
];

The list of available buttons was taken from the same pages where the machine names of plugins are listed (see the previous step).
As a result, the CKEditor toolbar looks as follows:

CKEditor toolbar

4. Configuring the Bootstrap version and connection method

Among Bootstrap plugins there is one that must be loaded to CKEditor in any case regardless of which Bootstrap plugins we actually need. This plugin is Bootstrap Include CSS/JS (machine name is jsplusBootstrapInclude. It does not have buttons, but it is this plugins that loads CSS and JS of Bootstrap on the page. And it is its settings that specify the version of Bootstrap to use, 3 or 4.
Currently, the default option is Bootstrap 3. If you use Bootstrap 4 on your website, add the following lines to your config.js:

config.jsplusBootstrapInclude = {
    version: 4
}

This parameter can be found in the plugin manualof Bootstrap Include CSS/JS. There are also other options there that are responsible for Bootstrap including and tailoring operation of CKEditor with JS+ add-ons to layout of any website. Please read more about this in the connecting Bootstrap article.

5. Adjusting the skin of CKEditor and other settings

Let's add some more options to CKEditor. allowedContent is for enabling all possible HTML tags, skin is for the special JS+ skin required to display Bootstrap Editor properly. Unfortunately, CKEditor has internal limitation: it can only display one skin on the page, so you cannot display the main instance of CKEditor in one style and the inner instance in Bootstrap Editor in another style.

config.allowedContent = true;
config.skin = 'be';

6. Configuring the inner CKEditor in Bootstrap Editor

To edit Bootstrap columns Bootstrap Editor has a number of its own addons. One of such modules designed to edit arbitrary HTML content is CKEditor. If the current page already loaded CKEditor, Bootstrap Editor uses it. But Bootstrap Editor adjusts its configuration because inside Bootstrap Editor CKEditor should be displayed with its own set of toolbar buttons. By default, CKEditor toolbar inside Bootstrap Editor looks as follows:

Internal CKEditor default toolbar

To configure buttons on the inner toolbar, we should do nearly the same as was described above, but in a special field CKEditorConfig of the Bootstrap Editor plugin:

config.jsplus_bootstrap_editor = {
    CKEditorConfig: {
        skin: "be",
        extraPlugins: 'jsplusBootstrapInclude,jsplus_bootstrap_tools,jsplus_bootstrap_table_tools,jsplusBootstrapEditorButtons',

        toolbar: [
            [
                'jsplus_bootstrap_button',
                'jsplus_bootstrap_icons',
                'jsplus_bootstrap_gallery',
                'jsplus_bootstrap_badge',
                'jsplus_bootstrap_label',
                'jsplus_bootstrap_breadcrumbs',
                'jsplus_bootstrap_alert'
            ],
            [
                'jsplus_show_blocks',
                '-',
                'jsplus_edit_col',
                'jsplus_bootstrap_row_add_up',
                'jsplus_bootstrap_templates',
                'jsplus_bootstrap_row_add_down',
                '-',
                'jsplus_bootstrap_col_move_left',
                'jsplus_bootstrap_col_move_right',
                'jsplus_bootstrap_delete_col',
                '-',
                'jsplus_bootstrap_row_move_up',
                'jsplus_bootstrap_row_move_down',
                'jsplus_bootstrap_delete_row'
            ],
            ['jsplusBootstrapEditorColConf', 'jsplusBootstrapEditorColChangeType'],
            ['jsplusBootstrapEditorColMoveLeft', 'jsplusBootstrapEditorColMoveRight'],
            ['jsplusBootstrapEditorColAdd'],
            ['jsplusBootstrapEditorColDelete'],
            '/',
            [
                'jsplus_bootstrap_table_new',
                'jsplus_bootstrap_table_conf',
                '-',
                'jsplus_bootstrap_table_add_row_up',
                'jsplus_bootstrap_table_add_row_down',
                'jsplus_bootstrap_table_row_conf',
                'jsplus_bootstrap_table_row_move_up',
                'jsplus_bootstrap_table_row_move_down',
                'jsplus_bootstrap_table_delete_row',
                '-',
                'jsplus_bootstrap_table_add_col_left',
                'jsplus_bootstrap_table_add_col_right',
                'jsplus_bootstrap_table_col_conf',
                'jsplus_bootstrap_table_col_move_left',
                'jsplus_bootstrap_table_col_move_right',
                'jsplus_bootstrap_table_delete_col',
                '-',
                'jsplus_bootstrap_table_add_cell_left',
                'jsplus_bootstrap_table_add_cell_right',
                'jsplus_bootstrap_table_cell_conf',
                'jsplus_bootstrap_table_merge_cells',
                'jsplus_bootstrap_table_merge_cell_right',
                'jsplus_bootstrap_table_merge_cell_down',
                'jsplus_bootstrap_table_split_cell_hor',
                'jsplus_bootstrap_table_split_cell_vert',
                'jsplus_bootstrap_table_delete_cell'
            ]
        ],
        allowedContent: true
    }
};

Please note that there is the jsplusBootstrapEditorButtons plugin in extraPlugins. This plugin is loaded inbside the main Bootstrap Editor plugin and contains toolbar buttons it uses (adding, moving and deleting columns, changin their type, configuring). Correspondingly, the following buttons are added to the toolbar: jsplusBootstrapEditorColConf, jsplusBootstrapEditorColChangeType, jsplusBootstrapEditorColMoveLeft, jsplusBootstrapEditorColMoveRight, jsplusBootstrapEditorColAdd, jsplusBootstrapEditorColDelete.

Also, you can see that the jsplusBootstrapEditor plugin and its buttons are removed from the configuration. This is because opening Bootstrap Editor recursively is currently not supported. In the future, this will be implemented, though.

Here is the result of our configuration of inner CKEditor toolbars:

Internal CKEditor custom toolbar

Example

In order to demonstrate how this works on practice, we prepared a clean CKEditor build that only contains CKEditor, all settings described in the article and a test page named index.html where you can see the result. Download the archive with example, but do not forget step 1 - copying, because this archive does not contain the JS+ add-ons themselves. You can download them in your personal account.