How to limit options in WYSIWYG editor in Pimcore (Example included)

What you'll learn with this guide

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

Where to use

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: Limited toolbar in Pimcore

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:  

Added features to the limited toolbar in Pimcore

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 straight forward - trial and error. :)

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

Looking for Exponential Growth? Let’s Get Started.
Explore next

Pimcore Tutorial

Check out our step-by-step tutorials on how to use Pimcore features and solutions.

Discover more