Erläuterung des korrigierten Problems
Wenn man ein <wbr>-Element innerhalb eines Links oder anderen Inline-Elementen wie etwa <strong> verwendete, wurden diese umgebenden Inline-Elemente vom CKEditor 5 an dieser Stelle unterteilt:
<a href="https://docs.typo3.org/Home/GettingStarted.html">https://docs.typo3.org/Home/</a>
<wbr>
<a href="https://docs.typo3.org/Home/GettingStarted.html">GettingStarted.html</a>
Lösung
Dasselbe Problem tritt im CKEditor 5 aktuell auch für Zeilenumbrüche mit <br> auf. Auf GitHub gibt es dazu einen offenen Issue, aus dem ich auch die Lösung für das <wbr>-Element entnehmen konnte.
model.schema.register('wbrTag', {
allowWhere: '$text',
allowAttributesOf: '$text',
isInline: true
});
const wbrTag = writer.createElement('wbrTag', model.document.selection.getAttributes());
- Dank allowAttributesOf: '$text' kann man jetzt Text verlinken oder mit Inline-Styles auszeichnen, in dem bereits ein <wbr>-Element gesetzt ist.
- Durch die Ergänzung von model.document.selection.getAttributes() kann man <wbr>-Elemente in Text einsetzen, der von Inline-Elementen umschlossen ist (ohne diese an der Stelle zu trennen).
Breaking Change: Modul-Import
Kurz nach Release der Extension hatte Benjamin Franzke den JavaScript Entry Point an Namenskonventionen angepasst (@sebkln/ckeditor-wordbreak), den von mir gewählten (@sebkln/ckeditor/wordbreak.js) aber vorerst ebenfalls behalten, um einen unmittelbaren Breaking Change zu vermeiden. Dies wurde als Version 1.0.2 veröffentlicht.
Daher habe ich die Gelegenheit des Bugfixes genutzt, den alten Entry Point zu entfernen und die Extension mit einer neuen Major-Version zu veröffentlichen.
Falls nicht schon geschehen, müsst ihr den Import des Plugins in eurer CKEditor-Konfiguration anpassen:
editor:
config:
importModules:
- '@sebkln/ckeditor-wordbreak'