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:
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:
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.
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!
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…
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…
can i install and use CKEditor plugins for which there is no Drupal module?
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
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.
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?
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.
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
I’m having the same issue! Any help on this please????
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.
@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
Hello all… I have the same @9.0.7. Can someone help?