Einfache Schritte zur Konfiguration CKEditor in TYPO3

TYPO3 verwendet YAML-Dateien, um CKEditor zu konfigurieren, da YAML einfach, lesbar und gut strukturiert ist. Es ist für Entwickler leicht, nur die Teile zu überschreiben oder zu erweitern, die sie benötigen, ohne alles von Grund auf neu zu schreiben.

Eine typische CKEditor-Konfiguration in TYPO3 ist in kleinere YAML-Dateien unterteilt. Jede Datei konzentriert sich auf einen bestimmten Bereich der Konfiguration:

• Verarbeitungsregeln – wie TYPO3 HTML filtert, bereinigt und speichert
• Basiseinstellungen des Editors – Toolbar, Formatierungsoptionen, Verhalten
• Plugins – Funktionsladen und benutzerdefinierte Erweiterungen

YAML basiert stark auf Einrückungen und einer Schlüssel-Wert-Struktur, was es sowohl benutzerfreundlich als auch leicht versionierbar macht. TYPO3 verwaltet die modulare Konfiguration mithilfe des Schlüsselworts imports:, sodass Sie die Kerneinstellungen wiederverwenden und sicher erweitern können.

Grundlegende YAML-Struktur in TYPO3

# File: EXT:site_package/Configuration/RTE/Custom.yaml
imports:
 - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
 - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
 - { resource:
 "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
editor:
 config:
   toolbar:
     - [ 'bold', 'italic', 'underline' ]
     - [ 'link', 'unlink' ]
     - '/'
     - [ 'numberedList', 'bulletedList' ]
   stylesSet:
     - { name: "Highlight", element: "span", attributes: { class:
 "highlight" } }

Registrieren Ihres YAML-Presets in TYPO3

// ext_localconf.php
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['custom'] =
   'EXT:site_package/Configuration/RTE/Custom.yaml';

TYPO3 lädt und kombiniert diese YAML-Dateien automatisch, sodass CKEditor vollständig die Kontrolle darüber hat, wie er sich verhält.

TYPO3 stellt in der Regel drei häufig genutzte Presets zur Verfügung:

1. Minimal: Sehr einfache Konfiguration mit grundlegenden Formatierungswerkzeugen. Geeignet für einfache Eingabeformen, wie Titel oder Teaser.
2. Standard: Der Standard-Editor, der in den meisten TYPO3 Installationen verwendet wird. Die ausgewogene Toolbar, gängige Formatierungsoptionen und saubere Filterregeln.
3. Vollständig: Ein funktionsreicheres Preset mit erweiterten Formatierungen und zusätzlichen Werkzeugen. Wird häufig für inhaltsreiche Felder verwendet.

Diese Presets beeinflussen wichtige Bereiche des Editors:

• Toolbar-Layout
• Formatierungswerkzeuge und Block-Elemente
• Erlaubte Tags und Attribute
• Content-Filterung
• Plugin-Verfügbarkeit

Diese Presets dienen als Ausgangspunkt. Ab hier erweitern oder ersetzen Entwickler sie oft mit ihren eigenen benutzerdefinierten YAML-Presets, um den Anforderungen des Projekts gerecht zu werden.

Presets im CKEditor von TYPO3 definieren, wie der Editor aussieht und sich verhält. Sie steuern, welche Werkzeuge verfügbar sind, wie Inhalte gefiltert werden und welche Plugins geladen werden. Kurz gesagt, ein Preset legt die Regeln und Funktionen für die Redakteure fest.

Das YAML-Preset für TYPO3 CKEditor ist in der Regel in drei Teile unterteilt:

1. Verarbeitungsregeln – Verstehen, wie Inhalte vor dem Speichern bereinigt und gefiltert werden.

 imports:
 - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }

2. Basiseinstellungen des Editors – Steuern des Toolbar-Layouts, des Schriftstyps und des Standardstils.

 editor:
 config:
   format_tags: "p;h1;h2;h3;pre"
   toolbarGroups:
     - { name: styles, groups: [ styles, format ] }

3. Plugins und Funktionen – Neue Werkzeuge hinzufügen oder entfernen, erlaubtes HTML konfigurieren und zusätzliche Plugins laden.

 editor:
 config:
   extraPlugins:
     - justify
   removeButtons:
     - Anchor
     - Underline

Hinweis: CKEditor 5 ist modularer als CKEditor 4, wodurch YAML-Konfigurationen sauberer, leichter zu verwalten und flexibler für moderne TYPO3-Projekte werden.

Wenn Sie von älteren TYPO3-Versionen auf CKEditor 5 migrieren, die htmlArea RTE oder frühere CKEditor-Setups verwendet haben, erfordert die Migration einige Überlegungen, um Inhalts- oder Formatierungsprobleme zu vermeiden.

Empfohlener Migrations-Workflow

1. Überprüfen Sie bestehende RTE-Einstellungen
Überprüfen Sie bestehende PageTS- und TypoScript-Konfigurationen. Wählen Sie benutzerdefinierte Buttons, Klassen und erlaubte Tags aus.

2. Erstellen Sie ein passendes CKEditor-Preset
Wenn möglich, übertragen Sie die vorherigen Bearbeitungsfunktionen in YAML.
Beispiel für das Anpassen einer alten Toolbar:

editor:
config:
  toolbar:
    - [ 'Bold', 'Italic', 'Underline' ]
    - [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight',
 'JustifyBlock' ]
    - [ 'NumberedList', 'BulletedList', 'Indent', 'Outdent' ]

3. Aktivieren Sie erforderliche Plugins
Ältere Editoren haben jetzt CKEditor 5-Plugins. Machen Sie dann nur das, was Sie benötigen.

4. Testen Sie Inhaltsfelder im Backend
Öffnen Sie alte Texte, damit die Formatierung erhalten bleibt. Speichern Sie erneut, damit TYPO3 das alte Markup bereinigen kann.

5. Bereinigen Sie inkonsistentes HTML
Entfernen Sie unerwünschte Tags oder Inline-Stile, die CKEditor nicht mehr unterstützt.

Das Filtersystem von CKEditor stellt sicher, dass Redakteure sauberes, konsistentes HTML erzeugen. TYPO3 fügt seine eigene Verarbeitung hinzu, sodass zusammen unerwünschte Tags und unübersichtliches Markup aus Ihren Inhalten ferngehalten werden.

Kernidee

Sie definieren explizit, welche Tags, Attribute und Klassen erlaubt sind. Alles andere wird entfernt.

Erlauben/Blockieren von HTML

processing:
 allowTags: [ p, a, strong, em ]
 allowAttributes:
   a: [ href, target ]

Bereinigung von eingefügtem Inhalt

Das Filtering entfernt Inline-Stile und unnötiges Markup aus kopiertem Inhalt, um die Datenbank sauber zu halten.

processing:
 htmlSanitizer:
   removeInlineStyles: true

CKEditor ist zu einem zuverlässigen Bestandteil der TYPO3-Bearbeitungserfahrung geworden und bietet Redakteuren eine sauberere und strukturiertere Möglichkeit, mit Inhalten zu arbeiten. Mit durchdachter Konfiguration können Sie einen Editor gestalten, der für Ihr Team einfach zu verwenden ist und gleichzeitig die Anforderungen komplexer Projekte unterstützt.

Für Entwickler bietet die moderne YAML-basierte Konfiguration klare Kontrolle über Formatierung, Funktionen und Filtering. Und wenn Sie mit einer TYPO3 Agentur arbeiten, sorgt eine gut definierte RTE-Konfiguration für eine reibungslosere Zusammenarbeit und hält den Inhalt auf der gesamten Website konsistent.

Ein richtig konfigurierter CKEditor führt zu einer besseren Backend-Erfahrung, weniger Frontend-Problemen und einem stabileren TYPO3 Projekt insgesamt.