You bought a Bootstrap 5-in-1 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.
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.
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 Bootstrap Bundle 5-in-1:
Bootstrap Editor installation
Bootstrap Tools installation
Bootstrap Widgets installation
Bootstrap Table Tools installation
File Uploader Lite installation
Merge all values together in extraPlugins and add this line to config.js:
config.extraPlugins = 'jsplusInclude,jsplusBootstrapTools,jsplusBootstrapWidgets,jsplusTableTools,jsplusBootstrapEditor,jsplusFileUploaderLite';
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'
],
[
'jsplusFastUploadImage',
'jsplusFastUploadPreview',
'jsplusFastUploadFile'
],
[
'jsplus_bootstrap_button',
'jsplus_bootstrap_icons',
'jsplus_bootstrap_label',
'jsplus_bootstrap_badge',
'jsplus_bootstrap_breadcrumbs',
'jsplus_bootstrap_alert',
'jsplus_bootstrap_gallery',
],
[
'jsplusShowBlocks',
'-',
'jsplusBootstrapToolsContainerEdit',
'jsplusBootstrapToolsContainerAdd',
'jsplusBootstrapToolsContainerAddBefore',
'jsplusBootstrapToolsContainerAddAfter',
'jsplusBootstrapToolsContainerDelete',
'jsplusBootstrapToolsContainerMoveUp',
'jsplusBootstrapToolsContainerMoveDown',
'-',
'jsplusBootstrapToolsRowEdit',
'jsplusBootstrapToolsRowAdd',
'jsplusBootstrapToolsRowAddBefore',
'jsplusBootstrapToolsRowAddAfter',
'jsplusBootstrapToolsRowDelete',
'jsplusBootstrapToolsRowMoveUp',
'jsplusBootstrapToolsRowMoveDown',
'-',
'jsplusBootstrapToolsColEdit',
'jsplusBootstrapToolsColAdd',
'jsplusBootstrapToolsColAddBefore',
'jsplusBootstrapToolsColAddAfter',
'jsplusBootstrapToolsColDelete',
'jsplusBootstrapToolsColMoveLeft',
'jsplusBootstrapToolsColMoveRight',
],
'/',
[
'jsplusTableAdd',
'jsplusTableDelete',
'-',
'jsplusTableConf',
'-',
'jsplusTableRowAddBefore',
'jsplusTableRowAddAfter',
'jsplusTableRowConf',
'jsplusTableRowMoveUp',
'jsplusTableRowMoveDown',
'jsplusTableRowDelete',
'-',
'jsplusTableColAddBefore',
'jsplusTableColAddAfter',
'jsplusTableColConf',
'jsplusTableColMoveLeft',
'jsplusTableColMoveRight',
'jsplusTableColDelete',
'-',
'jsplusTableCellConf',
'jsplusTableCellMergeRight',
'jsplusTableCellMergeDown',
'jsplusTableCellSplit'
],
[
'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:
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 Include CSS/JS (machine name is jsplusInclude. 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 no framework (pure HTML usage). As far you use Bootstrap 3 or 4 on your website, add the following lines to your config.js:
config.jsplusInclude = {
framework: "b3" // or "b4"
}
This parameter can be found in the plugin manual of 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.
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';
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:
To configure buttons on the inner toolbar, we should do nearly the same as was described above, but in a special field HTMLEditorConfig of the Bootstrap Editor plugin:
config.jsplusBootstrapEditor = {
HTMLEditorConfig: {
skin: "be",
jsplusInclude: {
framework: "b3"
},
extraPlugins: 'jsplusInclude,jsplusBootstrapTools,jsplusBootstrapWidgets,jsplusTableTools,jsplusFileUploaderLite',
toolbar: [
[
'jsplusFastUploadImage',
'jsplusFastUploadPreview',
'jsplusFastUploadFile',
],
[
'jsplus_bootstrap_button',
'jsplus_bootstrap_icons',
'jsplus_bootstrap_label',
'jsplus_bootstrap_badge',
'jsplus_bootstrap_breadcrumbs',
'jsplus_bootstrap_alert',
'jsplus_bootstrap_gallery',
],
[
'jsplusShowBlocks',
'-',
'jsplusBootstrapToolsContainerEdit',
'jsplusBootstrapToolsContainerAdd',
'jsplusBootstrapToolsContainerAddBefore',
'jsplusBootstrapToolsContainerAddAfter',
'jsplusBootstrapToolsContainerDelete',
'jsplusBootstrapToolsContainerMoveUp',
'jsplusBootstrapToolsContainerMoveDown',
'-',
'jsplusBootstrapToolsRowEdit',
'jsplusBootstrapToolsRowAdd',
'jsplusBootstrapToolsRowAddBefore',
'jsplusBootstrapToolsRowAddAfter',
'jsplusBootstrapToolsRowDelete',
'jsplusBootstrapToolsRowMoveUp',
'jsplusBootstrapToolsRowMoveDown',
'-',
'jsplusBootstrapToolsColEdit',
'jsplusBootstrapToolsColAdd',
'jsplusBootstrapToolsColAddBefore',
'jsplusBootstrapToolsColAddAfter',
'jsplusBootstrapToolsColDelete',
'jsplusBootstrapToolsColMoveLeft',
'jsplusBootstrapToolsColMoveRight',
],
['jsplusBootstrapEditorColConf', 'jsplusBootstrapEditorColChangeType'],
['jsplusBootstrapEditorColMoveLeft', 'jsplusBootstrapEditorColMoveRight'],
['jsplusBootstrapEditorColAdd'],
['jsplusBootstrapEditorColDelete'],
'/',
[
'jsplusTableAdd',
'jsplusTableDelete',
'-',
'jsplusTableConf',
'-',
'jsplusTableRowAddBefore',
'jsplusTableRowAddAfter',
'jsplusTableRowConf',
'jsplusTableRowMoveUp',
'jsplusTableRowMoveDown',
'jsplusTableRowDelete',
'-',
'jsplusTableColAddBefore',
'jsplusTableColAddAfter',
'jsplusTableColConf',
'jsplusTableColMoveLeft',
'jsplusTableColMoveRight',
'jsplusTableColDelete',
'-',
'jsplusTableCellConf',
'jsplusTableCellMergeRight',
'jsplusTableCellMergeDown',
'jsplusTableCellSplit'
],
],
allowedContent: true
}
};
Please note there are some buttons are added on toolbar which refer to Bootstrap Editor features: jsplusBootstrapEditorColConf, jsplusBootstrapEditorColChangeType, jsplusBootstrapEditorColMoveLeft, jsplusBootstrapEditorColMoveRight, jsplusBootstrapEditorColAdd, jsplusBootstrapEditorColDelete.
Also, you can see that the jsplusBootstrapEditor plugin and its buttons jsplusBootstrapEditor and jsplusBootstrapEditorSelected 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:
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.