Simple Steps to Configure CKEditor in TYPO3

TYPO3 uses YAML files to configure CKEditor because YAML is simple, readable, and well-structured. It’s easy for developers to override or extend only the parts they need, without rewriting everything from scratch.

A typical CKEditor setup in TYPO3 is split into smaller YAML files. Each file focuses on a specific area of configuration:

• Processing rules – how TYPO3 filters, cleans, and stores HTML
• Base editor settings – toolbar, formatting options, behaviour
• Plugins – feature loading and custom enhancements

YAML depends heavily on indentation and key–value structure, making it both human-friendly and easy to version-control. TYPO3 handles modular configuration using the imports: keyword so you can reuse core settings and extend them safely.

Basic YAML Structure 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" } }

Registering Your YAML Preset in TYPO3

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

TYPO3 automatically loads and merges these YAML files, making CKEditor completely in control of how it behaves.

TYPO3 generally provides three commonly used presets:

1. Minimal: Very simple configuration with basic formatting tools. Suitable for simple input forms, such as titles or teasers.
2. Default: The standard editor used in most TYPO3 installations. The balanced toolbar, common formatting options, and clean filter rules.
3. Full: A more feature-rich preset with advanced formatting and additional tools. Often used for content-rich fields.

These presets influence key areas of the editor:

• Toolbar layout
• Formatting tools and block-level elements
• Allowed tags and attributes
• Content filtering
• Plugin availability

These presets act as a starting point. From here, developers often extend or replace them with their own custom YAML presets to match the requirements of the project.

Presets in TYPO3’s CKEditor define how the editor looks and behaves. They control which tools are available, how content is filtered, and which plugins are loaded. In short, a preset sets the rules and capabilities for editors.

The YAML preset TYPO3 CKEditor YAML is usually split into three parts:

1. Processing Rules – Understand the way content is cleaned and filtered before saving.

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

2. Base Editor Settings – Control toolbar layout, font type and default style.

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

3. Plugins and Features – New or remove tools, configure the allowed HTML, and load additional plugins.

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

Note: CKEditor 5 is more modular than CKEditor 4, making YAML configurations cleaner, easier to manage, and more flexible for modern TYPO3 projects.

If you're upgrading from older TYPO3 versions that used htmlArea RTE or earlier CKEditor setups, the migration to CKEditor 5 requires a few considerations to avoid content or formatting issues.

Recommended Migration Workflow

1. Review existing RTE settings
Check existing PageTS and TypoScript configurations. Select custom buttons, classes and allowed tags.

2. Create a matching CKEditor preset
When possible, print the previous editing capabilities back to YAML. 
Example for matching an old toolbar:

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

3. Enable required plugins
Older editors now have CKEditor 5 plugins. Then only do what you need.

4. Test content fields in the backend
Open old texts so that formatting remains. Save again so that TYPO3 can clean up legacy markup.

5. Clean up inconsistent HTML
Remove unwanted tags or inline styles that CKEditor no longer supports.

CKEditor’s filtering system ensures editors produce clean, consistent HTML. TYPO3 adds its own processing on top, so together they keep unwanted tags and messy markup out of your content.

Core Idea

You explicitly define which tags, attributes, and classes are allowed. Everything else is removed.

Allowing/Blocking HTML

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

Pasted Content Cleanup

Filtering strips inline styles and unnecessary markup from copied content to keep the database clean.

processing:
 htmlSanitizer:
   removeInlineStyles: true

CKEditor has become a reliable part of the TYPO3 editing experience, giving editors a cleaner and more structured way to work with content. With thoughtful configuration, you can shape an editor that feels simple for your team while still supporting the needs of complex projects.

For developers, the modern YAML-based setup provides clear control over formatting, features, and filtering. And if you’re working with a TYPO3 agency, having a well-defined RTE setup makes collaboration smoother and keeps content consistent across the site.

A properly configured CKEditor leads to a better backend experience, fewer frontend issues, and a more stable TYPO3 project overall.