04.02.2022 | TYPO3, TYPO3 Schnipsel
TYPO3 10 – RTE Konfiguration bei alten Projekten ohne Extension
Hin und wieder findet sich ein altes Webprojekt in TYPO, was seit einigen Jahren zwar aktualisiert, aber mehr oder weniger mitgeschliffen wurde. Kürzlich wurde ich gefragt, ob man dem RTE in TYPO3 10 nicht weitere Farben hinzufügen kann, um etwa die Schrift damit zu formatieren. Per Default ist das nicht möglich und der RTE wird in der „default“ Konfiguration geladen. Der Rich Text Editor in TYPO3 bringt von Haus aus drei Konfigurationen mit sich. default, minimal und full. Diese wiederum können eine gute Vorlage für die eigene Konfiguration sein, um bspw. dann weitere Inline Styles oder eigene CSS Klassen unterzubringen. Zudem kann an dieser Stelle die Konfiguration des Editors selbst angepasst werden und Funktionen können ergänzt und/oder ausgeblendet werden.
In meinem Fall liegt die alte Seite (keine bösen Kommentare dazu! :-)) noch in einem extra Ordner im fileadmin. Einfacher ist es heute natürlich mit einem Sitepackage.
Zuerst lege ich eine AdditionalConfiguration.php im Ordner typo3conf an um mein neues Preset aufzunehmen. Dort gebe ich das Ziel für meine RTE Yaml Datei an. In diesem Fall wird wie eingangs erwähnt nicht in einer Extension gesucht, sondern direkt im Fileadmin in dem Ordner des alten Projektes.
<?php
if (empty($GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['MeinRTE'])) {
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['MeinRTE'] = 'fileadmin/templates/www.meinedomain.de/RTE/MeinRTE.yaml';
}
Als nächstes lege ich mir innerhalb des Fileadmin Verzeichnisses den Ordner „RTE“ an.
fileadmin/templates/www.meinedomain.de/RTE/
Dort kopiere ich jetzt die Yaml Datei der rte_ckeditor Extension ein und benenne sie in MeinRTE.yaml um
Quelldatei: typo3_src/typo3/sysext/rte_ckeditor/Configuration/RTE/Full.yaml Zieldatei: fileadmin/templates/www.meinedomain.de/RTE/MeinRTE.yaml
Zu guter Letzt muss im PageTS noch der neue Editor bzw. das Preset ausgewählt werden:
// Mein RTE Preset RTE.config.tt_content.bodytext.preset = MeinRTE
Im Idealfall sollte jetzt alles geladen werden. Überprüfen kannst du es auch nochmal in der Globalen Konfiguration im Backend. Dort müssten jetzt neben den drei Standard Presets dein neues erscheinen. Wichtig hierbei ist, achte darauf das die Datei für den Webserver zugänglich und lesbar ist.
Jetzt folgt das eigentliche, was Spaß an der ganzen Sache macht
Du kannst deine neue Yaml Konfiguration zum Beispiel um Inline Styles erweitern. Dazu öffne ich die MeinRTE.yaml und ergänze ein paar Inline Styles.
editor:
config:
# can be "default", but a custom stylesSet can be defined here, which fits TYPO3 best
stylesSet:
# block level styles
# - { name: "Orange title H2", element: "h2", styles: { color: "orange", background: "blue" } }
# - { name: "Orange title H3", element: "h3", styles: { color: "orange", background: "blue" } }
- { name: "Zitat", element: "blockquote" }
# - { name: "Code Block", element: "code" }
# Inline styles
- { name: "dunkelrot", element: "span", styles: { color: "#8b0000" } }
- { name: "dunkelgrau", element: "span", styles: { color: "#666666" } }
- { name: "dunkelblau", element: "span", styles: { color: "#283088" } }
- { name: "CadetBlue", element: "span", styles: { color: "#5f9ea0" } }
- { name: "DodgerBlue", element: "span", styles: { color: "#104e8b" } }
- { name: "RoyalBlue", element: "span", styles: { color: "#27408b" } }
- { name: "Aquamarine", element: "span", styles: { color: "#458b74" } }
- { name: "SaddleBrown", element: "span", styles: { color: "#8b4513" } }
- { name: "Coral", element: "span", styles: { color: "#cd5b45" } }
- { name: "DeepPink", element: "span", styles: { color: "#ee1289" } }
- { name: "FireBrick", element: "span", styles: { color: "#ff3030" } }
- { name: "Magenta", element: "span", styles: { color: "#ff00ff" } }
- { name: "NavajoWhite", element: "span", styles: { color: "#cdb38b" } }
Wichtig ist! Die Yaml Datei muss valide sein! Sonst wird sie nicht geladen und läuft im Backend auf einen Parse Error. Nicht benötigte Einstellungen kannst du mit einer # Raute deaktivieren.
Et voilá – Dir steht das neue Inline CSS zur Auswahl im Editor zur Verfügung.
Links, die dir unter Umständen zusätzlich eine Hilfe sein können: