19.11.2021 | OpenSource, TYPO3, TYPO3 Schnipsel, Webentwicklung
TYPO3 10, das Bootstrap Package und die eigene RTE Konfiguration

TYPO3 10 bringt den CKEditor mit sich, den man in Kombination mit dem Sitepackage Builder und einer eigenen Extension komfortabel anpassen kann. Der Sitepackage Builder liefert notwendige Dateien minimal mit, die dann später in der eigenen Extension angepasst werden können.

Warum das Ganze? – Wenn man Redakteurinnen und Redakteuren die Möglichkeit geben will bspw. Links oder Fließtext nachzuformatieren, besteht hier die Möglichkeit eigene CSS Klassen für Front & Backend zu vergeben.

Was ist zu tun?

1. ext_localconf.php

In der ext_localconf.php muss zunächst die Standard Konfiguration gesetzt werden. Der Sitepackage Builder macht genau das bereits. Trotzdem sollte der Eintrag überprüft werden.

/***************
 * Add default RTE configuration
 */

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

2. Eigene rte.css anlegen

Für den RTE muss eine eigene CSS Datei angelegt werden. Wichtig hierbei ist, dass eventuell ergänzte Klassen ebenfalls im Frontend CSS verfügbar sind. Dazu kann man für die Extension die original Datei des Bootstrap Package kopieren.

EXT:bootstrap_package/Resources/Public/Css/bootstrap4-rte.css

In meinem Beispeil habe ich die Datei innerhalb meines eigenen Ordners umbenannt in rte.css

3. RTE.tsconfig überprüfen

Die RTE.tsconfig innerhalb des Ordners Configuration/TsConfig/Page/RTE.tsconfig muss folgenden Inhalt haben. Das Preset des Themes was in der ext_localconf.php aufgerufen wird.

#############
#### RTE ####
#############
RTE {
    default {
        preset = athene
    }

}

4. Default.yaml kopieren

Auch die Default.yaml, die eigentliche Konfigurationsdatei des Editors, kann vom Bootstrap Package kopiert werden. Sie befindet sich in dem Ordner:

EXT:bootstrap_package/Configuration/RTE/Default.yaml

Die bereits bestehende kann ersetzt werden. Wichtig ist an dieser Stelle nur, dass innnerhalb der Konfiguration die CSS Adresse ausgetauscht und eventuelle CSS Klassen ergänzt werden.

config:
    contentsCss: "EXT:athene/Resources/Public/Css/rte.css"

    stylesSet:
        - { name: "Lead", element: "p", attributes: { 'class': 'lead' } }
        - { name: "Special Link", element: "a", attributes: { 'class': 'speciallink' } }

In diesem Fall wird die CSS Datei ersetzt und die Klasse „speciallink“ aufgenommen, die bei dem Element <a></a> gesetzt werden darf

5. Fehlermeldung(en) & Cache löschen 

Wenn Du eine Fehlermeldung bekommst „Indentation problem at line +(near “ stylesSet:“)“ bedeutet das nichts anders als, dass die Default.yaml ein Problem hat. Dazu solltest Du Dir genau das Original ansehen und ggf. die Einrückung der Konfigurationsblöcke korrigieren.

Zu guter letzt – Cache löschen. Idealerweise auch den des Browsers selbst.

Im Idealfall solltest Du jetzt Deine CSS Klassen, bzw. angepassten Editor, zur Verfügung haben.