How to Install CKEditor Plugins in Drupal 8

CKEditor is the WYSIWYG editor that you'll see in Drupal 8.

The default installation of CKEditor has a lot of options, but you can also add more features. CKEditor is an open source editor and has a wide range of extra plugins.

One of our customers asked how they could add 'color",  "text" and "font family" buttons to their CKEditor. This tutorial will explain how to add these buttons to the editor.

Step #1. Install the Required Modules and Libraries

You will need three modules to follow along with this tutorial:

1. CKEditor Font Size and Family
2. CKEditor Panel Button
3. CKEditor Color Button

Next, you'll need to install the CKEditor plugins from the official CKEditor site:

• Create a folder called libraries inside the root of your Drupal installation.
• Download the plugin files from the CKEditor site to the libraries folder.
• Uncompress the files.

You can find the three libraries at these links:

1. Color Button
2. Panel Button 
3. Font Size and Family

The folder structure in your Drupal installation should look like this:

• Log in to your Drupal site and click Extend.
• Scroll down to the CKEDITOR section of your modules’ page.
• Enable the 3 downloaded modules.
• Click Install.

Step #2. Add Plugins to the Editor

In this part of the tutorial, we'll link our new plugins to our version of CKEditor.

• Click Configuration > Text formats and editors.
• Click configure next to the Full HTML format.

• Scroll down and click Show group names, in order to add a group of buttons to the editor top button bar or second level button bar.

• Create a new group called Font.
• Click Apply.

• Drag and drop the “Font” buttons to the group you created.

• Add another button group and give it the name Color.
• Drag the two color-related buttons to the newly created group.

• Scroll down to the end of the page and click Save configuration.

Step #3. Test the Editor

Now we'll see if everything is installed correctly.

• Click Content > Add content > Article.
• Add some text and test the newly added buttons.
• Make sure that the text format is Full HTML.

• Click Save when you’re done editing and head over to the published article.

Summary

The CKEditor WYSIWYG core module in Drupal 8 can be enhanced with some additional plugins. They will greatly increase your efficiency as you work on your Drupal 8 content.

Thanks for reading!

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.