Zum Inhalt springen

Für meine Tutorials greife ich auf manuelle Trennzeichen zurück, z. B. um längere Verzeichnisangaben sauber trennen zu können. Noch unterstützen nicht alle Browser die CSS-Angabe hyphen, außerdem habe ich gern mehr Kontrolle über Worttrennungen.

Die shy-Entity zeigt im Falle einer Worttrennung einen Trennstrich an. Das HTML-Element <wbr> hingegen umbricht ohne Trennstrich und ist daher besonders für Begriffe geeignet, bei denen ein zusätzliches Zeichen zu Missverständnissen führen könnte. Beispiele wären die oben genannten Verzeichnisangaben, URLs oder E-Mail-Adressen.

  • shy: Grundstücks­verkehrsgenehmigungs­zuständigkeits­übertragungsverordnung
  • <wbr>: typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Audio.html

Mit TYPO3 v8 hat ein neuer Rich Text Editor Einzug gehalten. Da für den CKEditor scheinbar kein Plugin existierte, das diese Trennzeichen ermöglicht, habe ich mich mal etwas näher mit dem neuen RTE und seinen Plugins auseinandergesetzt. Das Ergebnis ist nun auf GitHub zu finden.

Da die shy-Entity im Rich Text Editor komplett unsichtbar ist (nicht mal ein Leerzeichen ist zu sehen), fügt der Button noch ein umschließendes span-Element hinzu. Durch dessen Gestaltung wird dem Redakteur an der Stelle ein hellblau hinterlegter Trennstrich angezeigt. Über lib.parseFunc_RTE wird dieser Wrap im Frontend wieder sauber entfernt.

Grundsätzlich ist das Plugin eher für technisch versierte Redakteure geeignet, die im Zweifel zum Quellcode des RTE umschalten und das Trennzeichen dort wieder entfernen.

Die beiliegende README beinhaltet auch eine Anleitung, wie man das Plugin in den rte_ckeditor von TYPO3 v8 integriert.

Zur News-Übersicht