---
title: "Configuration Examples"
manual: "RTE by CKEditor"
version: "13.4"
permalink: "https://docs.typo3.org/permalink/typo3/cms-rte-ckeditor:config-examples@13.4"
source: "Configuration/Examples.rst"
rendered: "2026-10-03T08:24:43+00:00"
---

# Configuration Examples {#config-examples}

## How do I use a different preset? {#how-do-i-use-a-different-preset}

Instead of using the default "default" preset, you can change this, for example
to "full", using **page TSconfig**:

**EXT:my_sitepackage/Configuration/page.tsconfig**

```tsconfig
RTE.default.preset = full
```

Of course, the preset must already exist, or you must define it. `rte_ckeditor`
ships with presets "minimal", "default" and "full".

Additionally, you can set specific presets for specific types of textfields.

For example to use preset "full" for the field "bodytext" of all content elements:

**EXT:my_sitepackage/Configuration/page.tsconfig**

```tsconfig
RTE.config.tt_content.bodytext.preset = full
```

To use preset "minimal" for the field "bodytext" of only content elements
with ctype="text":

**EXT:my_sitepackage/Configuration/page.tsconfig**

```tsconfig
RTE.config.tt_content.bodytext.types.text.preset = minimal
```

For more examples, see [RTE](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/PageTsconfig/Rte.html#pagetsrte) in "TSconfig Reference".

## How do I create my own preset? {#how-do-i-create-my-own-preset}

In your sitepackage extension:

In `ext_localconf.php`, replace `my_extension` with your extension key, replace `my_preset` and `MyPreset.yaml`
with the name of your preset.

**EXT:my_sitepackage/ext_localconf.php**

```php
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_preset']
    = 'EXT:my_extension/Configuration/RTE/MyPreset.yaml';
```

In `Configuration/RTE/MyPreset.yaml`, create your configuration, for example:

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

```yaml
# Import basic configuration
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" }
# Add configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
  config:
    # Include custom CSS
    contentsCss:
      - "EXT:my_extension/Resources/Public/Css/rte.css"

```

See also the note for [editor.config.contentsCss](https://docs.typo3.org/permalink/typo3/cms-rte-ckeditor:editor-config-contentscss@13.4).

## How do I customize the toolbar? {#how-do-i-customize-the-toolbar}

The toolbar can be customized individually by configuring required toolbar
items in the YAML configuration. The following configuration shows the toolbar
configuration of the minimal editor setup included in file
`EXT:rte_ckeditor/Configuration/RTE/Minimal.yaml`:

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

```yaml
# Minimal configuration for the editor
editor:
  config:
    toolbar:
      items:
        - bold
        - italic
        - '|'
        - clipboard
        - undo
        - redo

```

The `'|'` can be used as a separator between groups of toolbar items.

Additional configuration options are available in the official CKEditor 5
[Toolbar documentation](https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html)

### Grouping toolbar items in drop-downs {#config-example-toolbargrouping}

To save space in the toolbar or to arrange the features thematically, it is
possible to group several items into a dropdown as shown in the following
example:

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

```yaml
# Minimal configuration for the editor
editor:
  config:
    toolbar:
      items:
        - bold
        - italic
        - { label: 'Additional', icon: 'threeVerticalDots', items: [ 'specialCharacters', 'horizontalLine' ] }

```

## How do I allow a specific tag? {#how-do-i-allow-a-specific-tag}

Allowed content in CKEditor 5 is to be configured via the General HTML Support
plugin option `config.htmlSupport`.

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

```yaml
# Allow the <iframe> tag with all attributes, all classes and all styles,
# as well as demonstrating class restrictions to the <i> tag
editor:
  config:
    htmlSupport:
      # if you want to allow that an inline tag like `<i>` can also be empty
      allowEmpty: ['i']
      allow:
        - { name: 'iframe', attributes: true, classes: true, styles: true }
        # multiple definitions for the same tag name are possible
        - { name: 'i', classes: [ 'fa-brands', 'fa-typo3' ] }
        # allows any repetitive class name, that starts with `fa-`
        # (the regular expression has to be defined in `pattern`)
        - { name: 'i', classes: { pattern: '^((fa-[^\h]+)(\h+|$))+' } }

```

> [!NOTE]
> `config.htmlSupport` only applies to elements that are "known" to
> CKEditor 5. Tags like `<svg>` or custom elements like
> `<my-element>` are not configurable this way as
> `htmlSupport.allow` can only handle
> elements that are defined in the [CKEditor 5 schema](https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html#enabling-custom-elements).

## How do I configure the font plugin? {#config-example-fontplugin}

<!-- TODO: no Markdown rendering for "versionadded" -->

In order to use the font plugin, the RTE configuration needs to be adapted:

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

```yaml
editor:
  config:
    toolbar:
      items:
        # add button to select font family
        - fontFamily
        # add button to select font size
        - fontSize
        # add button to select font color
        - fontColor
        # add button to select font background color
        - fontBackgroundColor

    fontColor:
      colors:
        - { label: 'Orange', color: '#ff8700' }
        - { label: 'Blue', color: '#0080c9' }
        - { label: 'Green', color: '#209d44' }

    fontBackgroundColor:
      colors:
        - { label: 'Stage orange light', color: '#fab85c' }

    fontFamily:
      options:
        - 'default'
        - 'Arial, sans-serif'

    fontSize:
      options:
        - 'default'
        - 18
        - 21

    importModules:
      - { 'module': '@ckeditor/ckeditor5-font', 'exports': [ 'Font' ] }

```

More information can be found in the
[official documentation of CKEditor](https://ckeditor.com/docs/ckeditor5/latest/features/font.html).

## How do I enable the fullscreen plugin? {#how-do-i-enable-the-fullscreen-plugin}

<!-- TODO: no Markdown rendering for "versionadded" -->

In order to use the fullscreen plugin, the RTE configuration needs to be adapted:

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

```yaml
editor:
  config:
    toolbar:
      items:
        # add button to enable fullscreen view
        - fullscreen

    fullscreen:
      menuBar:
        # Disable menu bar in fullscreen view
        isVisible: false

    importModules:
      - { module: '@ckeditor/ckeditor5-fullscreen', exports: [ 'Fullscreen' ] }

```

More information can be found in the
[official documentation of CKEditor](https://ckeditor.com/docs/ckeditor5/latest/features/fullscreen.html).

## How do I configure the Link Browser? {#config-example-customplugin}

The TYPO3 Link Browser can be utilized in both the RTE and for FormEngine TCA fields. The latter
is configured through `TCA` settings, and the RTE editor itself is configured via the central
YAML file.

There are several configuration options available. Please see [Link Browser specific options](https://docs.typo3.org/permalink/typo3/cms-rte-ckeditor:config-linkbrowser@13.4) for
the detailed reference, and [EXT:rte_ckeditor/Configuration/RTE/Editor/LinkBrowser.yaml (GitHub)](https://github.com/typo3/typo3/blob/13.4/typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/LinkBrowser.yaml)
for an example configuration.

## How do I create a custom plugin? {#how-do-i-create-a-custom-plugin}

With CKEditor 5 the plugin architecture has changed and CKEditor 4 plugins
are not compatible with CKEditor 5. It is advised to read the
[CKEditor 4 to 5 migration](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/migration-from-ckeditor-4.html#plugins)
to understand the conceptual changes, also related to plugins.

Writing a custom plugin for CKEditor 5 can be done in TypeScript or JavaScript,
using the [CKEditor 5 plugin system](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/plugins.html).

In this example, we integrate a simple timestamp plugin to CKEditor 5.
Make sure to replace `<my_extension>` with your extension key.

1.  Create the plugin file

    Add the following ES6 JavaScript code:

    **EXT:\<my_extension>/Resources/Public/JavaScript/Ckeditor/timestamp-plugin.js**

    ```javascript
    import { Plugin } from '@ckeditor/ckeditor5-core';
    import { ButtonView } from '@ckeditor/ckeditor5-ui';

    export class Timestamp extends Plugin {
      static pluginName = 'Timestamp';

      init() {
        const editor = this.editor;

        // The button must be registered among the UI components of the editor
        // to be displayed in the toolbar.
        editor.ui.componentFactory.add(Timestamp.pluginName, () => {
          // The button will be an instance of ButtonView.
          const button = new ButtonView();

          button.set({
            label: 'Timestamp',
            withText: true
          });

          // Execute a callback function when the button is clicked
          button.on('execute', () => {
            const now = new Date();

            // Change the model using the model writer
            editor.model.change(writer => {

              // Insert the text at the user's current position
              editor.model.insertContent(writer.createText(now.toString()));
            });
          });

          return button;
        });
      }
    }
    ```
1.  Register the ES6 JavaScript

    **EXT:\<my_extension>/Configuration/JavaScriptModules.php**

    ```php
    <?php

    return [
        'dependencies' => ['backend'],
        'tags' => [
            'backend.form',
        ],
        'imports' => [
            '@my-vendor/my-package/timestamp-plugin.js' => 'EXT:my_extension/Resources/Public/JavaScript/Ckeditor/timestamp-plugin.js',
        ],
    ];

    ```
1.  Include the plugin in the CKEditor configuration

    **EXT:\<my_extension>/Configuration/RTE/MyPreset.yaml**

    ```yaml
    editor:
      config:
        importModules:
          - { module: '@my-vendor/my-package/timestamp-plugin.js', exports: [ 'Timestamp' ] }
        toolbar:
          items:
            - bold
            - italic
            - '|'
            - clipboard
            - undo
            - redo
            - '|'
            - timestamp

    ```

    -   **The `importModules` item in line 4 imports the previously registered ES6**

        module. The `timestamp` item in line 14 adds the plugin to the toolbar.
1.  Use the plugin

    ![The custom timestamp plugin in the editor](images/timestamp-plugin.png)