Mit Typo3 v8 kam der allseits beliebte CKEditor als neuer Haupt-Richtexteditor in den Einsatz. Dieser kann über die RTE Konfig beliebig eingestellt werden. In diesem Tutorial lernen Sie wie sie den neuen RTE von Typo3 einrichten.

Der CKEditor bringt in der vorinstallierten Version im TYPO3 bereits 3 Profile mit. Diese heißen FULL, DEFAULT und MINIMAL und sind im .YAML Format unter typo3/sysext/rte_ckeditor/Configuration/RTE/ zu finden.

Diese sollten wir uns auch als Vorlage nehmen, da diese so gut wie alle Konfigurationen bereits beinhalten. Unten finden Sie eine vollständige, v9 kompatible Konfiguration.

Eigene Konfig nutzen

Um nun eine eigene Konfiguration zu erstellen müssen wir in unserem Design-Template in der „ext_localconf.php“ eine Zeile Code hinzufügen und Anpassen:

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['myConfig'] = 'EXT:TEMPLATE-NAME/Configuration/RTE/KONFIG-NAME.yaml';

Diese Konfig müssen wir jetzt anlegen. Jetzt sollten die Standard-Elemente von der Full-Konfig einmal ganz oben in die Konfig geschrieben werden.

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" }

Damit ist der CKEditor initialisiert und lädt alles Standardmäßige, damit der Editor angezeigt wird. Jetzt geht es an die eigentliche Konfiguration. Die Config beginnt nach den Imports mit:

editor:
  config:

und darunter kommen jetzt die gewünschten Elemente. Zuerst wollen wir unsere eigenen Styles inkludieren. Das machen wir so:

stylesSet:
      - { name: "rot", element: "span", styles: { color: "#8c1d40" } }
      - { name: "grau", element: "span", styles: { color: "#5f5e5e" } }
      - { name: "blau", element: "span", styles: { color: "#1d71b8" } }
      - { name: "orange", element: "span", styles: { color: "#f39200" } }

Dadurch erhalten wir im CKEditor auf der Backend-Seite ein Styleset, mit dem wir die Texte in ganz bestimmte Farben einstellen können. Jetzt machen wir uns weitere Formatvorlagen:

format_tags: "p;h1;h2;h3;pre"

Das kommt auf die gleiche Position wie „stylesSet“. Wir definieren nun, welche Toolbar-Icons über dem Editor angezeigt werden sollen / können. Wobei ein Trenner mit dem „/“-Zeichen hinzugefügt werden können:

toolbarGroups:
      - { name: clipboard, groups: [clipboard, undo] }
      - { name: editing,   groups: [find, selection, spellchecker] }
      - { name: links }
      - { name: insert }
      - { name: tools }
      - { name: table }
      - { name: tabletools }
      - { name: document,  groups: [ mode, document, doctools ] }
      - { name: others }
      - "/"
      - { name: basicstyles, groups: [ basicstyles, align, cleanup ] }
      - { name: paragraph,   groups: [ list, indent, blocks, align, bidi ] }
      - { name: specialcharacters,   groups: [ insertcharacters ] }
      - { name: spellchecker }
      - "/"
      - { name: styles }

Anpassungen für das Text-Layout (Mitte, links rechts) können so hinzugefügt werden:

justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify

Zum Schluss wollen wir noch bestimmte Plugins zulassen oder deaktivieren:

extraPlugins:
      - justify
      - font
      - find
      - bidi
      - selectall
      - autolink
      - wordcount

    removePlugins:
      - image

Konfigurations-Generator

Man kann sich auch eine Konfiguration generieren, wobei zu beachten ist, dass die Syntax auf jeden Fall angepasst werden muss. Aber um zu sehen, wie ein Element heißt, welches man in den Editor einfügen will, reicht es für alle Fälle:

https://ckeditor.com/latest/samples/toolbarconfigurator/#basic

Vollständige Konfiguration

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:
    # can be "default", but a custom stylesSet can be defined here, which fits TYPO3 best
    stylesSet:
      - { name: "ot", element: "span", styles: { color: "#8c1d40" } }
      - { name: "grau", element: "span", styles: { color: "#5f5e5e" } }
      - { name: "blau", element: "span", styles: { color: "#1d71b8" } }
      - { name: "orange", element: "span", styles: { color: "#f39200" } }

    format_tags: "p;h1;h2;h3;pre"

    toolbarGroups:
      - { name: clipboard, groups: [clipboard, undo] }
      - { name: editing,   groups: [find, selection, spellchecker] }
      - { name: links }
      - { name: insert }
      - { name: tools }
      - { name: table }
      - { name: tabletools }
      - { name: document,  groups: [ mode, document, doctools ] }
      - { name: others }
      - "/"
      - { name: basicstyles, groups: [ basicstyles, align, cleanup ] }
      - { name: paragraph,   groups: [ list, indent, blocks, align, bidi ] }
      - { name: specialcharacters,   groups: [ insertcharacters ] }
      - { name: spellchecker }
      - "/"
      - { name: styles }

    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify

    extraPlugins:
      - justify
      - font
      - find
      - bidi
      - selectall
      - autolink
      - wordcount

    removePlugins:
      - image

    removeButtons:

# Allow s and u tag
processing:
  allowTags:
    - s
    - u