Schluss mit ungewollten Absätzen: So konfigurierst du Pre-Tags im CKEditor 5 richtig

Kennst du das? Du arbeitest an einer TYPO3-Instanz, willst einen sauberen Code-Block oder vorformatierten Text (<pre>) in den Editor einfügen, speicherst ab – und plötzlich zerschießt es dir das Frontend-Layout.

Der Grund: TYPO3 hat deinen <pre>-Tag liebevoll in einen <p>-Tag verpackt.

Gerade in der Version 13.4 LTS mit dem CKEditor 5 stolpern viele Entwickler über dieses Verhalten. Das Problem liegt meist nicht am Editor selbst, sondern daran, wie der TYPO3 HTMLparser die Daten verarbeitet, bevor er sie in die Datenbank schreibt.

Aber keine Sorge: Das lässt sich mit wenigen Zeilen Konfiguration beheben. In diesem Artikel zeige ich dir Schritt für Schritt, wie du deinem RTE beibringst, <pre> als eigenständigen Block zu respektieren.

Schritt 1: Die YAML-Konfiguration anpassen

Der wichtigste Hebel ist deine RTE-Konfiguration (meist in deinem Sitepackage unter Configuration/RTE/ zu finden).

Standardmäßig geht TYPO3 davon aus, dass fast alles Text ist und daher in einen Absatz gehört. Wir müssen dem processing-Bereich mitteilen, dass das <pre>-Element auch außerhalb von Absätzen existieren darf.

Öffne deine Preset-Datei (z. B. MyPreset.yaml) und füge folgenden Block hinzu oder ergänze ihn:

YAML

# EXT:my_sitepackage/Configuration/RTE/MyPreset.yaml

processing:
  allowTagsOutside:
    - pre
    - code
    - hr
    - img

Was passiert hier? Die Anweisung allowTagsOutside sagt dem Parser explizit: "Wenn du ein <pre>-Element findest, das alleine steht, lass es in Ruhe und zwinge es nicht in ein <p>-Korsett."

Schritt 2: CKEditor 5 "General HTML Support" prüfen

Damit der Editor das Tag während der Eingabe nicht schon verwirft oder umwandelt, muss sichergestellt sein, dass CKEditor 5 das Element erlaubt.

Falls du nicht das dedizierte "Code Block"-Plugin nutzt, sondern rohes HTML erlauben möchtest, hilft oft ein Blick in die editor-Konfiguration derselben YAML-Datei:

YAML

editor:
  config:
    htmlSupport:
      allow:
        - { name: 'pre', classes: true, attributes: true }
        - { name: 'code', classes: true, attributes: true }

Damit stellst du sicher, dass auch Attribute (wie CSS-Klassen für Syntax Highlighting) erhalten bleiben.

Schritt 3: Das Frontend nicht vergessen (TypoScript)

Du hast alles konfiguriert, der Quellcode im Backend sieht sauber aus, aber im Frontend ist der <p>-Tag immer noch da?

Dann funkt dir das TypoScript dazwischen. Auch bei der Ausgabe (Rendering) prüft TYPO3 den Code. Hier müssen wir lib.parseFunc_RTE anpassen.

Füge folgendes zu deinem TypoScript-Setup hinzu:

Code-Snippet

# Erlaube <pre> explizit
lib.parseFunc_RTE.allowTags := addToList(pre)

# Definiere <pre> als externen Block (außerhalb von p-Tags)
lib.parseFunc_RTE.externalBlocks := addToList(pre)
lib.parseFunc_RTE.externalBlocks {
    pre {
        stripNL = 1
        callRecursive = 1
    }
}

Das externalBlocks-Attribut sorgt dafür, dass TYPO3 bei der Ausgabe versteht: Hier beginnt ein Block, der die normale Absatz-Logik unterbricht.

Fazit: Caches leeren und freuen

Nachdem du die YAML-Dateien und das TypoScript angepasst hast, ist der wichtigste letzte Schritt: Alle Caches leeren (am besten über "Flush TYPO3 and PHP Cache" im Install Tool / Maintenance Bereich).

Jetzt sollten deine Code-Blöcke sauber und ohne unnötige P-Tags in der Datenbank landen und im Frontend ausgegeben werden.

Viel Erfolg beim Coden!