Back to documentation

Installing CKEditor add-ons to Drupal 8

CKEditor is already installed into Drupal 8 by default, so you do not need to install it (unlike in Drupal 7).
So the steps you are to do are pretty easy, here we'll show you how to install Bootstrap plugins to Drupal 8 (Bootstrap Tools, Bootstrap Table Tools, File Uploader Lite and Bootstrap Editor).

Download the modules (for Drupal 8) and according CKEditor add-ons you want to install. Add-ons can be downloaded from support.js.plus after purchase. Modules can be found in the Drupal 8 installation instructions for each add-on. For example here is such page for Bootstrap Tools: Bootstrap Tools Drupal 8 module.
Copy add-ons into libraries folder in the root of your Drupal installation. If this directory does not exist please create it manually. In the result you will have file structure about:
```
drupal8/
  libraries/
    jsplusBootstrapInclude/
    jsplusBootstrapTools/
    jsplusBootstrapWidgets/
    jsplusTableTools/
    jsplusBootstrapEditor/
    jsplus_uploader/
```
In order to use our Bootstrap Editor skin in CKEditor, copy directory into core/assets/vendor/ckeditor/skins.
Install the modules. The easiest way is to go to Administration → Extend and click Install new module button (look to the top of the page), but you can use also "drush" or "drupal" utilities (not described in this article).
Note. If you do not have Install new module button visible, please check your module Update manager is enabled. This module is responsible for all Drupal updates including new modules installation.
Choose your module archives. In our case they are:
Bootstrap Tools module Bootstrap Widgets module Bootstrap Table Tools module File Uploader Lite module Bootstrap Editor module
and as far we use Bootstrap there is one more module you need to install:
Bootstrap Include module
This is the module for including Bootstrap common features into your pages. It is a required dependency for all other Bootstrap modules.
After uploading all these modules go again to Administration → Extend section, find all uploaded modules, mark them checked and press Install button (located at the bottom of the page). This will enable uploaded modules.
Great! Plugins were installed, now you need only to add new buttons to CKEditor toolbar. Go to Administration → Configuration → Content authoring page and select text format you need to change. In our example we change "Basic HTML" text format which is already configured to use CKEditor. Click on tits Configure button.
Find Toolbar configuration section and drag'n'drop buttons you want to use to the toolbar.

Optionally you can configure the add-ons by changing their options in vertical tabs in CKEditor plugin settings section.
Uncheck checkbox Limit allowed HTML tags and correct faulty HTML. This is required not to stripe out some tags (including table tags). If you skip this step some buttons (i.e. Insert Bootstrap Table Column) will not be even visible on the toolbar. Or append the list of permitted tags and attributes (this will require knowledge of how CKEditor ACL works).
That's all. You can use your CKEditor add-ons when you create or edit any article in Drupal 8.
Configuring the inner CKEditor in Bootstrap Editor. To configure buttons on the inner toolbar, go to Configuration → Text formats and editors → Your CKEditor format → Configure → CKEditor Bootstrap Editor and type in the code.
```
"extraPlugins": "jsplusInclude,jsplusBootstrapTools,jsplusBootstrapWidgets,jsplusTableTools,jsplusFileUploaderLite",
"jsplusInclude": {
    "framework": "b4"
}
```

Drupal 8 F.A.Q.

Q: CKEditor stripes out some tags when I save content or switch to source mode.
A: Check you've correctly done step 9 of this manual. In case you modify tags list manually there is a possibility that you forgot to permit some tags or attributes.

Q: There are some style problems with displaying dialogs (incorrect colors on hover to dialog panel or buttons).
A: This is issue in Drupal 8 stylesheets (currently in 8.1 problem still exists). Without installing JS+ add-ons you will have the save problems. Luckely this issue does not affect to functionality. Let's wait official Drupal fix (or you can change CSS of Drupal theme manually).

Q: I see new buttons on the toolbar but they have no icons.
A: Check permissions to "libraries" folder (in the root of your Drupal installation): your web server must have access to it to return icons to browser. For example on Ubuntu server you can fix this by executing command (by root user from Drupal directory):
chown -R www-data:www-data libraries; chmod -R 755 libraries
In other systems please check the name of your web server user and substitute it instead of www-data in the command above.