How to limit options in your WYSIWYG editor in Pimcore — a short guide

Factory.hr
Pimcore Development Hub
3 min readApr 16, 2021

What will you know after reading this guide

By reading this guide till the end you’ll understand how to limit options on WYSIWYG editables in Pimcore.

Where to use this feature?

WYSIWYG is a great tool for letting the user edit content with a lot of freedom, but often there are certain parts where the default toolbar seems a bit over the top and if the person editing isn’t quite tech-savvy, using some options could potentially break the page you are editing. Luckily, there is a simple way of limiting every Pimcore WYSIWYG’s toolbar individually.

Solution

If you’re in dire need of a solution for limiting toolbar groups in your WYSIWYG editable, look no further. As I’ve mentioned above, there is quite a simple way for limiting your options in the editor.

Since Pimcore’s rich text editor is based on CKEditor, we can use the toolbarGroups options and specify the toolbar groups we want to use when calling a WYSIWYG instance in our code.

So, if you want to let the user only be able to make his text bold, italic or something basic we can specify the editor to use only basic styles like this:

Visually, it’s going to look like this:

In the example above we can see the use of toolbarGroups option mentioned above. For it to work we need to specify a name of this “specialized” WYSIWYG and the most important part, add the groups, which do all the magic.

This is quite simple, right? Now, if you find this type of WYSIWYG limiting you can add additional groups. For example, we can bold or make text italic now but what if we want to make a word differently styled or increase its size, or maybe the user should be able to add a link to a page? We can go ahead and add style groups which let us do just that:

This one will visually look like this:

As we can see from these examples above, adding additional groups is really easy and all we really have to do is know what is the name of each toolbar group and what it represents.

For that and any additional information needed I recommend following the official documentation from CKEditor and this picture which contains all the toolbar groups, you can access and add to your WYSIWYG.

Does it work?

Testing your toolbar groups is pretty straightforward — trial and error. :)

If you’d like some help with Pimcore, feel free to say hello@factory.hr!

--

--

Factory.hr
Pimcore Development Hub

We are Factory — a remote-first company focused on executing the most complex digital business transformations based on Pimcore technologies.