--- title: SEO und Barrierefreiheit mit CKEditor in TYPO3 verbessern url: "https://nitsantech.de/blog/konfigurieren-ckeditor-in-typo3" description: "Erfahren CKEditor in TYPO3 konfigurieren: YAML Presets einrichten, Symbolleiste anpassen & Plugins aktivieren für ein besseres Bearbeitungserlebnis." image: "https://nitsantech.de/fileadmin/_processed_/7/7/csm_Simple-Steps-to-Configure-CKEditor-in-TYPO3_db84ceedde.jpg" author: Sanjay Chauhan - TYPO3 Technopreneur date: 2019-08-06 modified: 2025-12-16 lastUpdated: 2026-02-25 keywords: - TYPO3 CMS - TYPO3 site - CKEditor - WYSIWYG - RTE - htmlArea - YAML - TYPO3 Core - CKEditor Video - SSL Certificate - typo3 backend categories: - TYPO3 CMS --- # SEO und Barrierefreiheit mit CKEditor in TYPO3 verbessern Einfache Schritte zur Konfiguration CKEditor in TYPO3 ===================================================== 23 Juli 2025 [![](https://nitsantech.de/fileadmin/ns_theme_nitsan/Team_Slider/Sven_Thelemann.png)](https://nitsantech.de/blog/autor/sven-thelemann) [Sven Thelemann](https://nitsantech.de/blog/autor/sven-thelemann) [ TYPO3 CMS ](https://nitsantech.de/categories/typo3-cms) Die Bearbeitungserfahrung in TYPO3 hat sich stark weiterentwickelt. Was früher etwas begrenzt wirkte, hat sich stetig zu etwas weitaus Intuitiverem und Flexiblerem entwickelt. Ein großer Teil dieser Verbesserung ist CKEditor 5, der moderne Rich Text Editor, der in den aktuellen TYPO3-Versionen verwendet wird. ![Einfache Schritte zur Konfiguration CKEditor in TYPO3](https://nitsantech.de/fileadmin/ns_theme_nitsan/Blog/Simple_Steps_to_Configure_CKEditor_in_TYPO3/Einfache_Schritte_zur_Konfiguration_CKEditor_in_TYPO3.jpg) Table of content CKEditor 5 bietet eine klare Benutzeroberfläche, flüssige Leistung und die richtige Balance zwischen Einfachheit und nützlichen Funktionen. Redakteure können sich auf das Schreiben konzentrieren, während Entwickler die Bearbeitungsumgebung durch ein modulares und konfigurierbares Setup an die Projektbedürfnisse anpassen können. Neugierig? Lies weiter… [CKEditor](https://ckeditor.com/ckeditor-5/) ist ein WYSIWYG RTE (Rich Text Editor), der die direkte Integration von JavaScript-basiertem Code in Online-Anwendungen oder Webseiten ermöglicht. Er kann unter kommerziellen und Open-Source-Lizenzen erworben werden. In den aktuellen [**TYPO3 Versionen**](https://nitsantech.de/blog/checken-typo3-version) stellt die Systemerweiterung rte\_ckeditor CKEditor 5 als Standardlösung für die Bearbeitung von Rich-Text zur Verfügung. Er ersetzt den älteren rtehtmlarea-Editor, der aus modernen TYPO3-Versionen entfernt wurde. CKEditor 5 basiert auf einer modularen, plugin-gesteuerten Architektur. Jede Funktion, von der grundlegenden Textformatierung über Tabellen, Links bis hin zu Medienwerkzeugen, wird durch Plugins gehandhabt, die Entwickler aktivieren, deaktivieren oder erweitern können. ![CKEditor 5](https://nitsantech.de/fileadmin/ns_theme_nitsan/Blog/Simple_Steps_to_Configure_CKEditor_in_TYPO3/CKEditor_5.png "CKEditor 5") [**TYPO3**](https://nitsantech.de/blog/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**](https://nitsantech.de/blog/typo3-install) 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. ![CKEditor Preset-Konfiguration in TYPO3](https://nitsantech.de/fileadmin/ns_theme_nitsan/Blog/Simple_Steps_to_Configure_CKEditor_in_TYPO3/CKEditor_Preset_Konfiguration_in_TYPO3.jpg "CKEditor Preset-Konfiguration in TYPO3") TYPO3 ermöglicht es, CKEditor-Presets global oder für spezifische Felder festzulegen, um das Bearbeitungserlebnis vollständig anzupassen. #### **Weisen Sie ein Preset global zu** RTE.default.preset = default Dies gilt für alle Rich-Text-Felder im [**TYPO3 Backend**](https://nitsantech.de/blog/typo3-backend). #### **Weisen Sie ein Preset einem bestimmten Inhaltselement z**u RTE.tt\_content.types.textmedia.bodytext.preset = minimal Das bedeutet, dass die Toolbars und Funktionen nur für diesen Inhaltstyp angezeigt werden, wenn der Inhaltstyp die angegebene Toolbar und Funktionen hat. #### **Weisen Sie ein Preset einem Erweiterungsfeld zu** RTE.config.tx\_news\_domain\_model\_news.bodytext.preset = full Dieser Prozess stellt sicher, dass Redakteure die notwendigen Werkzeuge für ihre Arbeit haben und Entwickler eine saubere und übersichtliche Konfiguration besitzen. ![Erstellen einer individuellen CKEditor-Konfiguration in TYPO3](https://nitsantech.de/fileadmin/ns_theme_nitsan/Blog/Simple_Steps_to_Configure_CKEditor_in_TYPO3/Erstellen_einer_individuellen_CKEditor-Konfiguration_in_TYPO3.jpg "Erstellen einer individuellen CKEditor-Konfiguration in TYPO3") In einer benutzerdefinierten Konfiguration können Sie die Toolbar, Stile, Plugins, Inhaltsregeln und moderne Funktionen wie Drag-and-Drop-Medienverwaltung ändern. #### **Schritt 1: Definieren Sie Ihre YAML-Datei** Erstellen Sie eine YAML-Datei innerhalb Ihres Site-Pakets oder Ihrer Erweiterung: \# 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', 'anchor' \] \- '/' \- \[ 'numberedList', 'bulletedList', 'indent', 'outdent' \] stylesSet: \- { name: "Highlight", element: "span", attributes: { class: "highlight" } } #### **Schritt 2: Registrieren Sie das Preset in TYPO3** Füge dies hinzu zu **ext\_localconf.php:** $GLOBALS\['TYPO3\_CONF\_VARS'\]\['RTE'\]\['Presets'\]\['custom'\] = 'EXT:site\_package/Configuration/RTE/Custom.yaml'; #### **Schritt 3: Weisen Sie das benutzerdefinierte Preset zu** RTE.default.preset = custom 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. ![Verwalten moderner CKEditor-Optionen in TYPO3](https://nitsantech.de/fileadmin/ns_theme_nitsan/Blog/Simple_Steps_to_Configure_CKEditor_in_TYPO3/Verwalten_moderner_CKEditor-Optionen_in_TYPO3.jpg "Verwalten moderner CKEditor-Optionen in TYPO3") TYPO3 bietet eine sehr starke Kontrolle über CKEditor-Funktionen, Toolbar, Stile und Plugins, um Ihr Bearbeitungserlebnis zu personalisieren. #### **Formatierungsoptionen** Definieren Sie, welche HTML-Elemente Redakteure verwenden können: editor: config: format\_tags: “p;h1;h2;h3;pre;div” #### **Toolbar-Anpassung** Gruppieren Sie Tasten logisch und vereinfachen Sie die Benutzeroberfläche: editor: config: toolbarGroups: \- { name: clipboard, groups: \[ clipboard, undo \] } \- "/" \- { name: styles } #### **Benutzerdefinierte Stile** Fügen Sie CSS-Klassen für spezifische Formatierungsbedürfnisse hinzu: editor: config: stylesSet: \- { name: "Quote", element: "p", attributes: { class: "quote-style" } } \- { name: "Button", element: "a", attributes: { class: "btn" } } #### **Plugin-Verwaltung** Aktivieren oder deaktivieren Sie Funktionen nach Bedarf: editor: config: extraPlugins: \- justify removePlugins: \- image removeButtons: \- Anchor \- Underline \- Strike #### **CSS-Integration** Verwenden Sie **contentsCss**, um Backend-Stile anzuwenden, die mit dem Frontend übereinstimmen, um eine genaue Vorschau zu erhalten. Durch die sorgfältige Verwaltung dieser Optionen können Sie einen Editor erstellen, der einfach für Redakteure zu verwenden ist, aber leistungsstark genug für komplexe Inhaltsworkflows. Ein Standardkonfigurationsmerkmal ist ausgewogene Formatierung, saubere Inhaltsfilterung und die wesentlichen Plugins, um eine konsistente Ausgabe zu gewährleisten. Entwickler können dann ihr eigenes Preset aus diesen YAML-Dateien erstellen, falls sie mehr als eine Kopie haben. #### **Core Standard-Importstruktur** 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" } #### **Beispiel der Core-Editor-Konfiguration** editor: config: format\_tags: "p;h1;h2;h3;h4;pre" toolbarGroups: \- { name: styles, groups: \[ styles, format \] } \- { name: basicstyles } \- { name: paragraph, groups: \[ list, indent, align \] } \- { name: links } \- { name: clipboard } \- { name: editing } \- { name: insert } Die meisten Projekte erweitern diese Basis, anstatt sie vollständig zu überschreiben, um die Kompatibilität zu gewährleisten und den Wartungsaufwand zu reduzieren. 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**](https://nitsantech.de/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**](https://nitsantech.de/blog/unternehmens-typo3-projekte-waehlen-sie-die-richtige-typo3-agentur) insgesamt. FAQs ---- Kann ich mehrere CKEditor-Presets in einem TYPO3-Projekt verwenden? Ja. Sie können verschiedene Presets pro Feld, pro Inhaltselement oder sogar pro Backend-Layout zuweisen, um spezifische Bearbeitungsanforderungen zu erfüllen. Wo sollte ich meine benutzerdefinierte CKEditor-Konfiguration speichern? Der empfohlene Ort ist innerhalb Ihres Site-Pakets oder Ihrer Erweiterung, normalerweise unter: **Configuration/RTE/** Kann CKEditor benutzerdefinierte HTML-Klassen für das Styling verwenden? Ja. Sie können erlaubte Klassen definieren und sie über Stil- oder Format-Dropdowns verfügbar machen. Ist CKEditor 5 mit Inhalten aus älteren TYPO3-Versionen kompatibel? In den meisten Fällen ja. TYPO3 wird älteres Markup bei Bedarf bereinigen und transformieren, aber es ist ratsam, Inhalte auf veraltete Inline-Stile oder nicht unterstützte Tags zu überprüfen. Sind zusätzliche Plugins für weitere Funktionen verfügbar? Ja. TYPO3 unterstützt eine breite Palette von CKEditor-Plugins. Sie können diese in Ihrer YAML-Konfiguration aktivieren, solange sie in Ihrer Installation verfügbar sind. Wird meine Konfiguration das Frontend-Styling beeinflussen? Nur wenn Sie den Editor mit Ihren Frontend-Stilen verbinden. Standardmäßig verwendet CKEditor sein eigenes Backend-Styling, es sei denn, Sie fügen benutzerdefiniertes Editor-CSS hinzu. #### Ansprechpartner für Internetagentur und TYPO3 Projekte #### Sven Thelemann Servicepartner - Deutschland [ st@nitsantech.de ](mailto:st@nitsantech.de) [ +49 351 48196661 ](tel:4935148196661) ![Sven Thelemann](/fileadmin/ns_theme_nitsan/CTA/SVEN__1_.png "Sven Thelemann") ![](https://nitsantech.de/fileadmin/ns_theme_nitsan/Team_Slider/Sven_Thelemann.png) ### Sven Thelemann Client Service Lead - [](https://www.linkedin.com/in/sven-thelemann-0a30867b/ "linkedin") Sven Thelemann ist Client Service Lead bei NITSAN und konzentriert sich auf die Bereitstellung von TYPO3 Lösungen, die den Kundenzielen entsprechen. Mit seinem ausgeprägten Verständnis für Technologie und Kundenerwartungen sorgt er für eine reibungslose Kommunikation und Projektabwicklung. Außerhalb der Arbeit fährt Sven Thelemann gerne Fahrrad und experimentiert mit selbstgemachten Rezepten. Kommentare und Antworten ------------------------ Danke für deinen Kommentar. Ihr Kommentar wurde erfolgreich hinzugefügt. Danke für deinen Kommentar. Dein Kommentar wird nach der Überprüfung sichtbar. Oops! Something went wrong, please try again later. ##### **Sei der erste der kommentiert** ### Verwandte Blogs [ ![](https://nitsantech.de/data:,) #### TYPO3 CMS für Öffentlichen Sektor Websites: Bewährte Verfahren ](https://nitsantech.de/blog/typo3-oeffentlicher-sektor-deutschland-2026) [ ![](https://nitsantech.de/data:,) #### TYPO3 SEO: Verbessern Sie das Ranking Ihrer TYPO3-Website ](https://nitsantech.de/blog/typo3-seo)