Am 15. Januar des Jahres 2024 ist erneut ein Minor-Release von Backdrop CMS erschienen. Ähnlich wie beim Release vom September 2023 liegt der Schwerpunkt auch bei der jüngsten Backdrop-Version auf der Aktualisierung externer Software. Diesmal wurde der Editor zum Erstellen und Bearbeiten von Inhalten im WYSIWYG-Modus auf den neuesten Stand gebracht.
CKEditor 5
Seit einiger Zeit liegt der in Backdrop integrierte CKEditor zur Inhaltsbearbeitung in der neuen Hauptversion 5 vor. Auch wenn CKEditor 4 prinzipiell noch verwendet werden kann, lief der offizielle Support dafür Ende 2023 aus. Grund genug für die Backdrop-Community, den neuen CKEditor in das CMS zu integrieren.
Was sich nach einem einfachen Austausch anhört, war kein leichtes Unterfangen. Denn während der neue Editor optisch nur leicht modernisiert daherkommt, hat sich dessen Architektur grundlegend geändert. Dass die Integration in Backdrop CMS dennoch gut gelungen ist, ist um so erfreulicher.
Was heißt das praktisch? In neuen Backdrop-Installationen wird von Beginn an CKEditor 5 verwendet. Der Editor funktioniert gut, und wer keine besonderen Anforderungen hat, braucht nichts weiter zu unternehmen.
In bestehenden Websites bleibt es dagegen zunächst bei CKEditor 4, die Editor-Version wird also nicht automatisch aktualisiert. Auf diese Weise bleibt Backdrop 1.27 auch dann rückwärtskompatibel, wenn Editor-Plugins genutzt werden, die noch nicht für den neuen CKEditor zur Verfügung stehen. Damit haben Website-Besitzer/innen, die auf Backdrop 1.27 aktualisieren, vorerst verschiedene Möglichkeiten:
- Sie verwenden weiterhin CKEditor 4, vor allem für bestehende Inhalte, die möglicherweise spezielle Plugins nutzen. Für neue Inhalte ohne besondere Anforderungen kann bereits Version 5 verwendet werden.
- Oder sie wechseln die Editor-Version auch für bestehende Inhalte und stoßen dazu den eingebauten Upgrade-Prozess an. Dabei wird jedes Textformat, das CKEditor verwendet, einzeln aktualisiert.
Editor-Upgrade Schritt für Schritt
Im folgenden beschreibe ich den Upgrade-Prozess von CKEditor 4 zu CKEditor 5 am Beispiel des Textformats »Filtered HTML«.
Ein Hinweis vorweg: Ab Backdrop 1.27 wird CKEditor 4 in der Modul-Liste und im Status-Bericht als »Deprecated« (veraltet) markiert. Das Modul sollte jedoch vorerst aktiviert bleiben.
- Zu Beginn gehe ich zur Module-Seite (Funktionalität > Module auflisten) und aktiviere CKEditor 5.
Das Vorgänger-Modul CKEditor 4 sollte, wie gesagt, aktiviert bleiben. - Anschließend rufe ich die Textformate auf (Konfiguration > Inhaltserstellung > Editoren und Textformate) und klicke beim gewünschten Format (Filtered HTML) auf »Konfigurieren«.
- Oben auf der Seite erscheint der Hinweis, dass das Textformat aktualisiert werden kann. Ich klicke auf den darin enthaltenen Link zur CKEditor Upgrade page.
Tipp: Um die Konfiguration nach dem Upgrade vergleichen zu können, öffne ich den Link in einem neuem Tab und schließe die aktuelle Seite nicht. - Auf der Upgrade-Seite (siehe Abb. unten) wird empfohlen, ein Backup des Textformats zu erstellen. Dazu öffne ich einen der Links in einem separaten Tab und sichere die Konfiguration auf meinem Rechner.
Außerdem erscheint auf der Upgrade-Seite ein Hinweis auf Toolbar-Buttons, die beim Upgrade entfernt werden. Der hier genannte BackdropUnlink-Button wird nicht mehr benötigt.
Da aus meiner Sicht alles stimmt, klicke ich auf »Confirm upgrade«.
Abbildung 1: Seite zur Aktualisierung eines Textformats auf CKEditor 5 - Nach der Bestätigung wird die Seite mit dem Textformat geladen. Oben auf der Seite steht eine Erfolgsmeldung mit der Aufforderung, die Editor-Toolbar und die Einstellungen des Textformats zu überprüfen.
Abbildung 2: Das Textformat wurde auf CKEditor 5 aktualisiert und kann überprüft werden. - Ich prüfe die Editor-Toolbar und weitere Einstellungen auf der Textformat-Seite. Soweit ich sehe, unterscheidet die Konfiguration sich nicht von den bisherigen Einstellungen.
Zum Abschluss empfehle ich, einen Blick auf Inhalte zu werfen, die mit CKEditor erstellt wurden, und probeweise einen Eintrag zu bearbeiten.
Inhalte betrachten und mit CKEditor 5 bearbeiten
- Ich gehe zu einer Seite, die mit CKEditor 4 erstellt wurde und klicke auf Bearbeiten.
- Möglicherweise erscheint ein Warnhinweis, dass der Inhalt bei Aktivierung von CKEditor 5 neu formatiert wird. In diesem Fall kopiere ich zur Sicherheit den HTML-Code und aktiviere erst dann den Editor per »Click to activate«. Falls etwas komisch aussieht, vergleiche ich den zuvor kopierten HMTL-Code mit dem aktualisierten Quellcode.
Abbildung 3: Warnhinweis beim Bearbeiten eines Inhaltseintrags - Zuletzt speichere ich den Beitrag. Er sieht aus wie gewohnt, und ich bin zufrieden.
Dabei belasse ich es. Weitere Inhalte bearbeite ich erst, wenn sie ohnehin geändert werden müssen. Und für den Fall der Fälle bleibt CKEditor 4 vorerst aktiviert.
Fazit
Wenn Editor und Textformat bis dahin standardmäßig waren, verläuft ein Upgrade auf CKEditor 5 problemlos. Die Bedienung des frischen Editors geht gut von der Hand, und dank moderner Oberfläche ist sie angenehmer als zuvor.
Etwas schwieriger kann die Situation sein, wenn Zusatz-Plugins wie CKEditor Acccordion, CKEditor Blocks oder File Entity Embed Filter in Verwendung sind. Während letzteres bereits mit CKEditor 5 zusammenarbeitet, sind die erstgenannten noch nicht kompatibel. Da die Anpassung von Plugins an den neuen Editor technisch anspruchsvoll ist, werden manche vielleicht auch gar nicht in diese Richtung ausgebaut.
Zuguterletzt lohnt sich nicht nur, aber auch vor dem Hintergrund von Plugin-Fragen ein Blick auf die vielversprechende Editor-Alternative TinyMCE, die wir hier im Blog bereits vorgestellt haben.
Weiteres zu Backdrop 1.27
Was die aktuelle Backdrop-Version neben dem neuen CKEditor noch zu bieten hat, steht im offiziellen Beitrag zum Release und in den Release Notes.