Zum Inhalt springen

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'
Zur News-Übersicht