CKEditor in TYPO3 CMS

CKEditor is TYPO3’s backend rich-text editor for creating and formatting content without manually writing HTML. Integrated through TYPO3’s Rich Text Editor (RTE) configuration, it provides editors with a familiar, accessible interface while giving administrators and integrators control over available features, styles, and HTML elements.

Was CKEditor bietet

Innerhalb von TYPO3 CMS unterstützt CKEditor gängige redaktionelle Aufgaben wie das Formatieren von Überschriften und Absätzen, das Erstellen von Links, das Aufbauen von Listen und Tabellen, das Einfügen von Medien sowie das Anwenden freigegebener Inhaltsstile. Seine Symbolleiste kann an verschiedene Projekte oder Benutzergruppen angepasst werden, sodass Redakteure nur die Optionen sehen, die sie benötigen.

  • Eine übersichtliche, benutzerfreundliche Bearbeitungsoberfläche
  • Strukturierte Inhalte, die dem Design-System der Website folgen
  • Konfigurierbare Symbolleisten, Stile, Plugins und Formatierungsregeln
  • Inhaltsfilterung zur Gewährleistung von gültigem, konsistentem HTML
  • Unterstützung für Links, Tabellen, Listen, Medien und wiederverwendbare Stile

Configuration in TYPO3

TYPO3 typically configures the editor with YAML presets. A preset can define the toolbar layout, enabled plugins, allowed content, style options, and processing behavior. Integrators can assign presets globally or to specific fields, page trees, or content contexts through TYPO3 configuration.

A well-designed preset should match the site’s frontend CSS and editorial requirements. For example, instead of allowing arbitrary colors and font sizes, the editor can offer a limited set of branded styles. This keeps content visually consistent and reduces the amount of cleanup required when content is rendered on the website.

Content Processing

When content is saved, TYPO3 processes the editor output according to the configured RTE rules. This processing can transform links, preserve approved attributes, remove unsupported markup, and prepare database content for frontend rendering. The configuration should therefore be tested in both directions: loading existing content into CKEditor and saving edited content back to TYPO3.

Best Practices

  • Keep the toolbar focused on features editors genuinely need.
  • Use semantic headings, lists, and tables rather than visual formatting alone.
  • Align editor styles with the frontend design and CSS classes.
  • Test links, pasted content, special characters, tables, and media.
  • Maintain presets in site packages so configuration is version-controlled.
  • Review accessibility, especially heading order, link text, and table structure.

Benefits for Editors and Integrators

For editors, CKEditor makes everyday content creation faster and more intuitive. For integrators, its configurable feature set provides control over structure, branding, security, and maintainability. Used with a carefully planned TYPO3 RTE preset, CKEditor helps teams produce accessible, consistent, and reusable content across a website.

rte_ckeditor is the official system extension that integrates the CKEditor JavaScript library as the default Rich Text Editor (RTE) inside the TYPO3 CMS backend. It allows content managers to create, format, and edit formatted text (WYSIWYG) without needing to manually write HTML code. [1, 2]

Core Capabilities

  • Text Formatting: Applies styles like bold, italics, underlines, and custom CSS classes directly to text.
  • Structure Management: Creates headers, ordered and unordered lists, bullet points, and data tables.
  • Integrated Link Browser: Connects text to internal pages, media files, and external URLs via the TYPO3 Link API.
  • Plugin Architecture: Supports extensibility using native CKEditor plugins and custom ES6 JavaScript modules. [1, 2, 3, 4, 5]