CKEditor - der neue Rich-Text-Editor im TYPO3-Backend
Bei der Eingabe von Texten in TYPO3 haben die Redakteure die Möglichkeit, Formatierungen einzugeben. So kann der dargestellte Text etwa durch Überschriften, Absätze oder Listen strukturiert werden, Links eingefügt oder Textbestandteile hervorgehoben werden.
TYPO3 bietet deshalb sogenannte Rich-Text-Editoren (RTE), mit deren Hilfe der Benutzer ohne HTML- und CSS-Kenntnisse diese Formatierungen einfügen kann. Mit der Version TYPO3 8.7 wurde der alte RTE durch die Extension CKEditor abgelöst. Die Konfiguration dieses Editors geschieht über YAML, so dass eigene Einstellungen problemlos umgesetzt werden können.
Zunächst ist es ratsam, in einer css-Datei die für die Texte der Webseite wichtigen Formatierungen und Klassen zu definieren. So kann sichergestellt werden, dass die Formatierung etwas von wichtigen Hinweisen auf allen Unterseiten gleich ist und so das Layout der Webseite (Schriftart, Farben, Abstände) einheitlich bleibt. Diese Datei kann über die Page TSConfig auch im Editor eingebunden werden, damit die Redakteure beim Bearbeiten gleich sehen, wie der Text später aussieht (z.B. Formatierung der Überschriften oder die Listenpunkte).
Eigene Konfiguration einbinden
Neben den drei Standard-Konfigurationen, die der Editor mitbringt, kann man auch eigene Konfigurationen schreiben, die speziell auf die Webseite zugeschnitten ist. Hier können eigene Klassen verwendet werden, und - was wichtig ist, wenn man auch eine AMP-Version der eigenen Seite mit TYPO3 erstellen möchte - unerwünschte inline-styles gar nicht erst zulassen, damit die AMP-Validierung auch nach Editieren der Seiteninhalte keine Fehler findet. Auch die Fehler bei der Darstellung, die oft beim Kopieren von Texten aus Word oder Outlook durch mitkopierte Formatierungen entstehen, lassen sich so vermeiden, da diese Formatierungen nicht mehr zulässig sind und beim Speichern automatisch herausgefiltert werden.
Dazu erstellt man zunächst ein eigenes YAML-File. Hierbei ist der Toolbar-Generator https://ckeditor.com/latest/samples/toolbarconfigurator/#basic sehr nützlich. Die Klassen, die für die Texte der Webseite vordefiniert werden, können dann in der Toolbar als Auswahlmöglichkeit angezeigt werden.
Diese Konfiguration wird dann in der ext_localconf.php einer Extension registriert:
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['myConfig'] = 'EXT:my_ext/Configuration/RTE/MyConfig.yaml';
Über die PageTSConfig kann dann ausgewählt werden, wo diese Konfiguration angewendet werden soll. So ist es möglich, für Extensions wie z.B. News eine andere Konfiguration festzulegen als in den normalen Textelementen.
RTE {
default.preset = default
config {
tt_content.bodytext {
preset = full
types.text.preset = minimal
}
tx_news_domain_model_news.bodytext.preset = myConfig
}
}