Einleitung
Für den CKEditor 4 hatte ich 2017 das "linebreak"-Plugin erstellt, das neben dem <wbr> HTML-Element auch das Soft-Hyphen ­ im RTE von TYPO3 v8+ ermöglicht.
Später wurde das Soft-Hyphen wieder im TYPO3-Core selbst ergänzt.
Auf meiner eigenen Website verwende ich das <wbr>-Element vor allem, um lange URLs und Verzeichnispfade in schmalen Viewports sauber zu umbrechen.
Mit TYPO3 v12 wird erstmals der CKEditor 5 mitgeliefert. Bestehende Plugins sind damit nicht mehr kompatibel, da sich die Software-Architektur des CKEditor grundlegend geändert hat.
Für das Soft-Hyphen stellt TYPO3 v12 bereits das Whitespace-Plugin zur Verfügung. Daher habe ich nun eine neue Extension speziell für das <wbr>-Element erstellt.
Die Features der neuen Extension
- Genereller Support des <wbr> HTML-Elements in CKEditor 5 und TYPO3 v12
- Redakteure können das Element durch einen Button an der aktuellen Cursor-Position einfügen
- Alle <wbr>-Elemente im Text werden durch einen farbig hinterlegten Pfeil hervorgehoben
Um das unsichtbare <wbr>-Element im Texteditor für Redakteure sichtbar zu machen, wird es durch einen gestylten <span>-Wrapper umschlossen.
Dieser Wrapper wird nicht in der Datenbank gespeichert, sondern ist nur in der Editierungsansicht vorhanden. Dies ist ein Vorteil der neuen CKEditor-Architektur.
Die neue Extension ermöglicht mir das weitere Upgrade dieser Website. Gleichzeitig ist es das erste (und hoffentlich nicht letzte) CKEditor-5-Plugin im TYPO3 Extension Repository!
Nächste Aufgabe: Code-Blöcke im CKEditor 5. Es bleibt spannend.