TYPO3-Extension für CKEditor-Plugins

  • Plugins zur Anpassung der Systemextension rte_ckeditor für den RTE
  • verändertes Verhalten bei der Handhabung von CSS-Klassen
  • angepasster Element-Pfad unter dem Rich Text Editor

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.

TYPO3-RTE CKEditor mit neuem Feld "Klassen" für die Zuweisung mehrerer voneinander unabhängiger CSS-Klassen durch die von a7digital entwickelte Extension a7rteplugins
TYPO3-RTE CKEditor mit angepasstem Element-Pfad zum gezielten Entfernen von CSS-Klassen durch die von a7digital entwickelte Extension a7rteplugins

Interessante Optionen der a7rteplugins im Überblick

Die Extension fasst verschiedene Plugins zusammen, die a7digital zur Anpassung des CKEditor entwickelt hat. Diese Plugins umfassen u.a. folgende Funktionen:

  • veränderte Handhabung von CSS-Formatierungen, sodass einem HTML-Element zwei oder mehrere voneinander unabhängige CSS-Klassen zugewiesen werden können
  • automatische alphabetische Sortierung der verfügbaren CSS-Klassen auch bei Verwendung des Import-Befehls
  • automatische Erzeugung von span- oder div-Elementen bei Klassenvergabe (wie oben beschrieben), die bei Bedarf anpass- und erweiterbar ist
  • gibt es mehrere Formatierungen, die sich gegenseitig ausschließen wie Farben oder Textanzeige in 2, 3 oder 4 Spalten, können die Optionen im Auswahlfeld so reduziert werden, dass bei Auswahl einer dieser Optionen die Gegenstücke nicht mehr angezeigt werden
  • Erweiterung des Element-Pfads unterhalb des RTE, sodass alle Elemente mit ihnen zugewiesenenen Formatierungen anzeigt werden mit der Möglichkeit, gezielt einzelne Klassen zu entfernen

Anleitung für Redakteure

Mit Umstieg auf die neue Systemextension CKEditor hat sich die Handhabung des RTE auch an einigen weiteren Stellen geändert. Eine Zusammenfassung haben im Rahmen der Änderungen für Redakteure in TYPO3 9 LTS beschrieben.

Kontaktdaten Kontaktdaten
TYPO3-Websites ist ein Service von a7digital.
German
English