How to Install CKEditor Plugins in Drupal 8

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!

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mike O

The last part of Step 1 didn’t work for me- there is nothing to enable. I believe I did everything correct up to that point. I created a libraries folder, and then extracted the plugins in that folder. I can see the files in the libraries/font etc. folders. No way to enable…

mac-vaal

Hi Mike, you have to install both the libraries and the modules. Without the modules you will not be able to enable them in Step 1.
I hope you find the answer…

Russell C

can i install and use CKEditor plugins for which there is no Drupal module?

sgarr

Do you think I can easely add the Enhance Image plugin (https://ckeditor.com/cke4/addon/image2) to my CKE in Drupal 8 ? 

Since I am on D8, I no longer have the image properties box, and this is confusing for my contributers. 

Thank you for the tutorial

mac-vaal

Hi sgarr, I was looking for the same issue but the idea of adding a module manually to CKE in Drupal 8 doesn’t seems me to be a good idea…
I think I’ll enable D8 responsive images module and we’ll see, hopping that will give you ideas.

Dilan

Hi, I think the folder hierarchy is not correct and created issues for me and the editor crashed, so in my installation, 

Drupal 8.7.3 installation

Drupal Root / Libraries / CKeditor / Plugins  

with a bunch of stuff in it, I do not see your hierarchy chowed up there.  

Any idea how I get this right, please?

mac-vaal

Hi Dilan,
Sorry for the delay.

I’m using Drupal 8.7.3 too and “CKEditor Color Button” works fine with the integrated CKE of my installation.
For this example, you have to install both the modules “Panel Button” and “CKEditor Color Button”, the first one is a prerequisite for the second.

And you’re right I don’t use the same paths as you for the libraries, all is under Drupal Root / Libraries :

Drupal Root / Libraries / panelbutton
and Drupal Root / Libraries / colorbutton

I hope that’ll help you.

esue1943

I’m running 8.8.0. Everything seems to install OK. If I add any of the new items to the active toolbar, the toolbar doesn’t come up when you try to edit content

Alejandro

I’m having the same issue! Any help on this please????

Rikibu

Same issue here. the color buttons are working, but font size and family will crash the editor window.
tried everything, but no chance to fix it.

imrodmartin

@Alejandro, @Rikibu – I’m able to get this working using the instructions except for one caveat.

As Mac pointed out above – the libraries must be /libraries/colorbutton, libraries/font, libraries/panelbutton.  Not the paths in the image.

It’s working for me on 8.8.5

Rod

Roberto

Hello all… I have the same @9.0.7. Can someone help?
Thanks,
Roberto

12
0
Would love your thoughts, please comment.x
()
x