TYPO3 Extension for CKEditor Plugins

  • plugins for customizing the system extension rte_ckeditor for the RTE
  • changed behavior when handling CSS classes
  • customized element path under rich text editor

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.

TYPO3-RTE CKEditor with new field "Classes" for the assignment of several independent CSS classes by the extension a7rteplugins developed by a7digital
TYPO3-RTE CKEditor with customized element path for targeted removal of CSS classes using the a7rteplugins extension developed by a7digital

Interesting Options of a7rteplugins at a Glance

The extension gathers several plugins that a7digital has developed to customize the CKEditor. These plugins include the following functions:

  • changed CSS formatting handling so that two or more independent CSS classes can be assigned to an HTML element
  • automatic alphabetical sorting of available CSS classes even when using the import command
  • automatic generation of span or div elements when classes are assigned (as described above), which is customizable and extensible if needed
  • if there are several formattings which are mutually exclusive like colors or text display in 2, 3 or 4 columns, the options in the selection field can be reduced so that when one of these options is selected, the counterparts are no longer displayed
  • extension of the element path below the RTE so that all elements are displayed with formattings assigned to them with the possibility to selectively remove individual classes

Instructions for Editors

With the change to the new system extension CKEditor, the handling of the RTE has also changed in some other places. A summary we have described in the context of the changes for editors in TYPO3 9 LTS.

Use of the Extension

This extension developed by a7digital is not represented in the TYPO3 Extension Repository (TER) until further notice, because there is no manual for it and the extension has only been extensively tested in the context of certain TYPO3 installations. Nevertheless, we describe it here, because it is an illustrative example for individual programming.

Contact data Contact data
TYPO3 Web Sites is a services of a7digital.