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!

Author

  • Jorge Montoya

    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
Article Rating
Subscribe
Notify of
12 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Mike O
Mike O
4 years ago

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
4 years ago
Reply to  Mike O

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
Russell C
4 years ago

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

sgarr
sgarr
4 years ago

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
4 years ago
Reply to  sgarr

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
Dilan
4 years ago

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
4 years ago
Reply to  Dilan

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
4 years ago

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
Alejandro
3 years ago
Reply to  esue1943

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

Rikibu
Rikibu
3 years ago
Reply to  esue1943

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
3 years ago
Reply to  Rikibu

@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
Roberto
3 years ago

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

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