Jetzt Kontakt aufnehmen

For coders TYPO3 Tech Corner

TYPO3 12 mit CKEditor 5: Stile als Einfachauswahl

TYPO3 12 mit CKEditor 5: Stile als Einfachauswahl

Wenn man im RTE in TYPO3 einen Link setzt, kann es sein, dass man zwischen verschiedenen Link-Klassen auswählen muss, um beispielsweise Buttons im Frontend zu erzeugen. Neu ist in TYPO3 12 dass man nicht nur einen Stil sondern mehrere Stile gleichzeitig auswählen kann. Wie man das mit einem CSS-Workarround verhindern kann, zeigen wir euch.

Stile kann man natürlich nicht nur für Links setzen, sondern für alle definierten Tags in der YAML-Konfiguration. In dieser Konfigurationsdatei kann mit mit dem Key contentsCss eine eigene CSS-Datei fürs Backend laden.

editor:
  config:
    contentsCss: ["EXT:sitepackage/Resources/Public/Css/Backend/CKeditor.css"]

Diese könnte beispielsweise so aussehen:

#EditDocumentController [id*='data_tt_content__'] {
  .ck-style-grid:has(.ck-on) .ck-off {
    pointer-events: none;
    opacity: 0.5;
  }
}

Damit werden alle anderen Optionen deaktiviert, sobald ein Stil ausgewählt wurde. Dies ist nicht unbedingt ideal, da man zuerst eine vergebene Klasse deaktivieren muss, will man eine andere Klasse vergeben. Dennoch hilft dieser Workarround dem einen oder anderen Anwender.

Übrigens: Der umschließende Wrapper #EditDocumentController ist nicht unbedingt nötig, kann euch aber helfen, wenn ihr Klassen mit eurem CSS überschreiben wollt, die bereits von TYPO3 gesetzt wurden.

Hinweis: Wer an einer sauberen Lösung interessiert ist, kann das offizielle Ticket upvoten: https://github.com/ckeditor/ckeditor5/issues/14206

Zurück

Kennst du das: Immer nur schnell schnell?

Wie wäre es einmal mit Zeit und Respekt für Codequalität? Arbeiten im Team? Automatisierte Tests?

Komm zu uns