Plugins to Customize the CKEditor

At the latest since TYPO3 9 LTS, another system extension has to be used for the Rich Text Editor (RTE) in TYPO3: the rte_ckeditor, because the system extension rtehtmlarea used until then is no longer supported. Since we used the RTE with the previous system extension intensively for assigning complex CSS classes for various formatting, we soon noticed some serious differences in the handling of the CKEditor. Because the new system extension can be extended in many ways with plugins, we developed our own plugins for all the functions we were missing in the new RTE, which we combined in the TYPO3 extension "a7rteplugins". With this extension we can change the behavior of the RTE so that it can handle CSS classes separately.

Probably the most important adjustment made by the a7rteplugins is that it provides a new field "Classes". This serves as a replacement for the "Styles" field of the CKEditor, which only allows the selection of one style, which is often not sufficient in our use cases. The a7rteplugins field "Classes" offers the possibility to give an element two or more independent CSS classes and brings along another important feature: Depending on whether a word or words are selected within a paragraph or across paragraphs, a class can create either a span or div element by its selection and be attached to it or directly to a p (paragraph) element. This reduces the number of clicks and selections required when assigning CSS classes, and also the risk of accidentally creating unnecessary paragraphs or container elements that bloat the HTML structure.

Another advantage of the new "Classes" field is that the sorting of the available styles is automatically alphabetical, also regardless of whether the definitions come from different YAML configuration files that depend on each other through an import specification. In contrast, by default, the available styles of the CKEditor are first grouped by their type (block, inline, or object style) and then displayed one after the other according to the order of files being imported, which can cause a major clutter in the styles selection box if you maintain different styles for different websites in separate configuration files that all import a base YAML configuration with common styles.

Another very useful addition by the a7rteplugins concerns the path below the RTE, which shows with the new system extension rte_ckeditor only the structure of the HTML elements, but no longer which CSS classes have been assigned to them. With the extension we developed, the path still shows all elements and their formatting, and also offers the possibility to selectively remove classes with just one click, while keeping other classes assigned to the same element. Compared to rtehtmlarea this is even an improvement, because it was not possible with the previous system extension in such a targeted way.