Plugins zur Anpassung des CKEditor

Spätestens seit TYPO3 9 LTS muss für den Rich Text Editor (RTE) in TYPO3 eine andere Systemextension, die rte_ckeditor, genutzt werden, weil die bis dahin verwendete rtehtmlarea nicht mehr unterstützt wird. Da wir den RTE mit der bisherigen Systemextension intensiv für die Zuweisung komplexer CSS-Klassen für verschiedenste Formatierungen genutzt haben, stellten wir bald einige gravierende Unterschiede in der Handhabung des CKEditor fest. Weil die neue Systemextension vielfältig durch Plugins erweiterbar ist, haben wir für alle Funktionen, die uns im neuen RTE fehlten, eigene Plugins entwickelt, die wir in der TYPO3-Extension "a7rteplugins" zusammenfassen. Damit können wir das Verhalten des RTE so verändern, sodass dieser CSS-Klassen separat handhaben kann.

Die wohl wichtigste Anpassung durch die a7rteplugins ist, dass sie ein neues Feld "Klassen" zur Verfügung stellt. Dieses dient als Ersatz für das "Styles"-Feld des CKEditor, welches nur die Auswahl von einem Stil zulässt, was in unseren Awendungsfällen häufig nicht ausreicht. Das a7rteplugins-Feld "Klassen" bietet die Möglichkeit, einem Element zwei oder mehrere voneinander unabhängige CSS-Klassen zu geben und bringt dabei eine weitere wichtige Funktion mit: Je nachdem, ob ein Wort oder mehrere Wörter innerhalb eines Absatzes oder absatzübergreifend ausgewählt werden, kann eine Klasse durch ihre Auswahl entweder ein span- oder div-Element erzeugen und an dieses oder auch direkt an ein p-Element (Absatz) angehängt werden. Das verringert die Anzahl der nötigen Klicks und Markierungen bei der Zuweisung von CSS-Klassen und auch die Gefahr, dass aus Versehen unnötig erstellte Absätze oder Container-Elemente die HTML-Struktur aufblähen.

Ein weiterer Vorteil des neuen Feldes "Klassen" ist, dass die Sortierung der verfügbaren Formatierungen automatisch alphabetisch erfolgt, auch unabhängig davon, ob die Definitionen aus verschiedenen YAML-Konfigurationsdateien stammen, die durch eine Import-Angabe voneinander abhängen. Im Standard werden die verfügbaren Stile des CKEditor dagegen zunächst nach ihrer Art (Block-, Inline- oder Objektstil) gruppiert und beim Importieren pro Datei nacheinander angezeigt, was ein größeres Durcheinander im Styles-Auswahlfeld bewirken kann, wenn man für verschiedene Websites unterschiedliche Stile in separaten Konfigurationsdateien pflegt, die alle eine Basis-YAML-Konfiguration mit gemeinsamen Stilen importieren.

Eine weitere sehr nützliche Ergänzung durch die a7rteplugins betrifft den Pfad unterhalb des RTE, der mit der neuen Systemextension rte_ckeditor nur noch die Struktur der HTML-Elemente anzeigt, aber nicht mehr, welche CSS-Klassen ihnen zugewiesen wurden. Durch die von uns entwickelte Extension zeigt der Pfad weiterhin alle Elemente und deren Formatierungen an und bietet darüber hinaus die Möglichkeit, gezielt Klassen mit nur einem Klick zu entfernen, während andere Klassen, die demselben Element zugewiesen wurden, erhalten bleiben. Gegenüber der rtehtmlarea ist das sogar eine Verbesserung, weil es mit der bisherigen Systemextension nicht so gezielt möglich war.