Adding plugins to PimCore Admin single CKEditor or globally to all WYSIWYG’s

This tutorial will teach you how to add plugins to a single (specific) PimCore admin WYSIWYG CKEditor or globally to all WYSIWYG.

Where to use

CKEditor is an excellent tool for editing text, but sometimes you may find that it lacks some features. Luckily, there are a lot of CKEditor plugins that can help with that, but what about adding them to a specific WYSIWYG or even globally? If you are struggling with that, this guide is just for you.

Solution

For this guide, we'll be using the FontAwesome 6 CKEditor plugin. Keep in mind that at the time of writing this guide, we're using the PimCore X (10.3.0) version, which uses CKEditor 4.17.1. 

First, you need to download the desired plugin's zip file and unpack it to the assets served folder, for example, to /public/static/admin/cke-plugins.

To add the plugin to a single WYSIWYG, we have to create a CKEditor custom js config.

Create a file called cke-custom-config.js in /public/static/admin/cke-plugins folder and add the following code to that file:

Now all that is left to do is to edit specific WYSIWYG in twig file, which goes like this:

And to add the CKEditor plugin globally, we need to create a bit different js config file.

To do that, create a file called cke-global-config.js in /public/static/admin/cke-plugins folder and add the following code in that file:

Now we need to load this javascript file to the PimCore administration. There are two approaches for this: using Bundles and Events. Since we don't really need a whole new bundle for this, we will use an event-based approach. 

You can find more information on that approach in Pimcore's Development Documentation. 

Create the file /src/EventListener/AdminAssetsListener.php, which we will use as a listener for injecting the js file, and insert this code:

The last thing we need to do is register this listener as a service in services.yaml

Now, clear the cache, and you should be good to go.

Does it work?

To test it, we can simply create some document with WYSIWYG in it and open CKEditor by clicking on that WYSIWYG. You should immediately see that a small icon is added to CKEditor. In our case, a small FontAwesome icon is added. And by clicking on it, you can start using your CKEditor plugin.

Do you have more questions or issues while implementing this? Reach out to us; we'll be glad to help!