Quelle: Pixabay
WYSIWYG-Editoren (What you see is what you get) sind ein integraler Bestandteil eines Web-CMS (Content Management System). Anstatt Text oder andere Inhalte als HTML-Code einzugeben, sehen wir sie beim Schreiben so, wie sie nach dem Speichern dargestellt werden. Um technische Hintergründe müssen wir uns dabei keine Gedanken machen.
Selbstverständlich integriert auch Backdrop CMS so einen Editor – CKEditor. Allerdings wird Version 4 des Editors nur mehr kurz unterstützt und erhält dann keinerlei Updates mehr. Das wäre an sich kein Problem, da Version 5 bereits verfügbar ist. Leider erfordert die neue Version eine komplette Überarbeitung der Integration in Backdrop. Und das gestaltet sich schwierig. Zudem unterscheidet sich das technische Konzept so stark von der Vorversion, dass die Gefahr besteht, bestehende Inhalte bereits beim Öffnen im neuen Editor zu verändern.
Zwar arbeite ich auch an der Integration von CKEditor 5 mit, aber die Erfahrungen damit haben mich veranlasst, mich nach möglichen Alternativen umzusehen. Fündig wurde ich zu meiner Überraschung bei TinyMCE. Ich kannte den Editor von früher (Drupal, Joomla...), hatte dessen weitere Entwicklung aber nicht mehr verfolgt. Entsprechend positiv überrascht war ich nach ersten Experimenten.
TinyMCE ist jetzt als Backdrop-Modul verfügbar.
Er sieht optisch etwas anders aus als CKEditor 4, aber das Verhalten ist weitgehend gleich. Die Integration mit der Bild-Bibliothek (Image Browser) und dem Link-Dialog ist identisch.
TinyMCE ausprobieren
- Lade das Modul herunter, am einfachsten über Funktionalität / Neue Module installieren (/admin/modules/install)
- Gehe zu Konfiguration / Inhaltserstellung / Editoren und Textformate / Filtered HTML (/config/content/formats/filtered_html) und wechsle in der Text-Editor Auswahl zu TinyMCE
- Speichern
Damit ist TinyMCE der Editor beim Bearbeiten und Hinzufügen von Inhalt (z.B. /node/add/post).
Aber wie die verfügbaren Buttons in der Werkzeugleiste anpassen? Am einfachsten durch das Wechseln des Editor-Profils.
Zurück zu /config/content/formats/filtered_html, dort kann zum Profil "Full" oder "Small" gewechselt werden, auch eine alternative Editor Skin mit dunklem Hintergrund für die Werkzeugleiste steht zur Verfügung. Zur "Content CSS files" Einstellung kommen wir später.
Falls die passende Werkzeugleiste nicht dabei ist, kann auf Konfiguration / Inhaltserstellung / TinyMCE profile builder (/admin/config/content/tinymce-builder) ein komplett neues Profil erstellt werden.
Dieses wird nach dem Speichern ebenfalls auf /config/content/formats/filtered_html zur Auswahl stehen.
Warum sind Filtereinstellungen und Profil getrennt?
Die TinyMCE-Bibliothek bietet weit über hundert Einstellungsoptionen. Beim Erstellen des Moduls stand ich vor der Entscheidung, einen großen Teil über eine Admin-Oberfläche anzubieten (zu umfangreich, nicht sinnvoll) oder den Großteil zu ignorieren (zu einschränkend). Profile sind ein Kompromiss. Das Admin-Formular bleibt übersichtlich, aber da die Profile als Konfiguration (JSON) gespeichert werden, stehen noch viel mehr Stellschräubchen über diese JSON-Dateien zur Verfügung.
Ein weiterer Vorteil der Profile: Sie können über den Konfigurations-Manager exportiert und auf einer anderen Webseite importiert werden. Das optimale Editor-Setup wird also einmal erstellt und ist überall anderswo mit minimalem Aufwand nutzbar.
Ist der Wechsel des Editors zu TinyMCE unproblematisch?
Kurze Antwort: Ja, der Wechsel gelingt ohne Probleme. Im Gegensatz zu CKEditor 5, der die Inhalte im Editorbereich schon beim Öffnen ändern kann, wird valides Markup von TinyMCE nicht angerührt.
Falls der alternative Editor doch nicht das Richtige ist, kann übrigens jederzeit zurück zu CKEditor 4 gewechselt werden.
Darstellung der Inhalte innerhalb des Editors
Schriftart und -größe, Farben, Zeilenabstand... all das spielt eine wichtige Rolle bei der Darstellung von Inhalten. Damit diese im Editor wirklich so aussehen, wie sie den Besucher:innen einer Webseite präsentiert werden (WYSIWYG), müsste das CSS des Frontend-Themes in den Editor integriert werden. Genau dazu ist die Einstellung Content CSS files im Filterformular da. TinyMCE wird CSS-Dateien aus dieser Einstellung auf die Inhalte im Editor anwenden.
Erweitern mit zusätzlichen Plugins
Wer mit CKEditor vertraut ist, und dessen verfügbare Werkzeugleisten-Buttons mit denen des TinyMCE Profile-Builders vergleicht, wird feststellen, dass TinyMCE deutlich mehr bietet. Es kann aber trotzdem sein, dass noch ein Feature fehlt. Entsprechend gibt es Zusatzmodule für TinyMCE. Diese werden ganz normal wie jedes andere Backdrop-Modul installiert, danach tauchen weitere Buttons im Profile-Builder auf.
Das Entscheidende ist trotzdem nicht dabei? Meine Erfahrung mit dem Erstellen von Plugin-Modulen sagt mir, dass es sehr viel einfacher ist, TinyMCE zu erweitern, als CKEditor 4 – geschweige denn CKEditor 5. Die Chancen stehen also gar nicht so schlecht, dass Erweiterungen als Backdrop-Module dazukommen werden.