TYPO3 CKEditor Anpassungen

1. CKEditor-Presets in TYPO3

TYPO3 verwendet den CKEditor als Rich Text Editor (RTE). Es stehen bereits mitgelieferte Presets zur Verfügung, z. B. full, minimal oder default. Zusätzlich können eigene Presets definiert werden.

Die aktiv genutzten Presets werden in der globalen TYPO3-Konfiguration registriert. Das geschieht in der PHP-Variablen:

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']

2. Presets per TypoScript definieren

Du kannst festlegen, welches Preset für den RTE verwendet werden soll. Dies geschieht über PageTSconfig. Standardmäßig wäre das z. B.:

RTE.default.preset = full

Wenn du ein eigenes Preset erstellt hast, kannst du es so aktivieren:

RTE.default.preset = akoe

Außerdem lassen sich Presets auch gezielt für bestimmte Inhaltselemente oder Feldtypen setzen, z. B. nur für das bodytext-Feld vom Typ textmedia:

RTE.config.tt_content.bodytext.types.textmedia.preset = full

Weitere Infos zu den RTE-Konfigurationsmöglichkeiten findest du hier:
TYPO3 PageTSconfig RTE Dokumentation

3. Eigene Presets erstellen

Die Standardpresets findest du im Systempfad:

/vendor/typo3/cms-rte-ckeditor/Configuration/RTE

Diese kannst du als Grundlage für eigene Presets verwenden.

Schritt-für-Schritt-Anleitung für ein eigenes Preset:

1. Lege in deinem Sitepackage den Ordner Configuration/RTE/ an.
2. Erstelle dort eine Datei wie z. B. akoe.yaml.
3. Kopiere den Inhalt eines Standardpresets hinein (z. B. aus full.yaml) und passe es nach deinen Wünschen an.

Damit TYPO3 dein Preset erkennt, muss es in der Datei ext_localconf.php deines Sitepackages registriert werden:

<?php

defined('TYPO3') or die();

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['akoe'] = 'EXT:akoesitepackage/Configuration/RTE/akoe.yaml';

4. Eigene Stile im CKEditor definieren

Du kannst eigene CSS-Klassen definieren, die dann über die Format-Auswahl im Editor zur Verfügung stehen. Das geschieht über die style.definitions in deiner YAML-Datei:

style:
  definitions:
    - { name: "Lead", element: "p", classes: ["lead"] }
    - { name: "Small", element: "small" }
    - { name: "Muted", element: "span", classes: ["text-muted"] }
    - { name: "Checklist", element: "ul", classes: ["list-check"] }

Damit diese Klassen im Editor auch korrekt angezeigt werden, müssen sie per CSS gestaltet sein (siehe nächster Punkt).

5. Eigenes CSS im RTE laden

Erstelle im Verzeichnis Resources/Public/css deines Sitepackages z. B. eine Datei rte.css. Dort kannst du deine CKEditor-spezifischen Klassen gestalten.

Beispiel:

.lead {
  font-size: 1.25em;
  font-weight: 300;
}
.text-muted {
  color: #6c757d;
}
.list-check li::before {
  content: "✔ ";
  color: green;
}

In deiner akoe.yaml bindest du die CSS-Datei folgendermaßen ein:

contentsCss:
  - 'EXT:akoesitepackage/Resources/Public/vendor/bootstrap-icons/bootstrap-icons.css'
  - 'EXT:akoesitepackage/Resources/Public/css/rte.css'

Du kannst beliebig viele Stylesheets einbinden. Auch Frameworks wie Bootstrap oder Iconfonts wie Bootstrap Icons sind möglich.