CKEditor in TYPO3 sauber konfigurieren
veröffentlicht am 04.02.2022
Den CKEditor in TYPO3 mit webpack und extra Plugins vorbildlich konfigurieren.
TYPO3 liefert den CKEditor 4 als Richtext-Editor mit. Beim Aufsetzen einer neuen Seite ist das Ganze dann erst mal recht ernüchternd:
Wir wollen Redakteur:innen (und uns selbst) jedoch ein besseres Erlebnis liefern als das, oder? Der Gedanke beim CKEditor ist ja auch, dass es ein WYSIWYG-Editor sein soll.
Und da wollen wir hin:
Vorbereitende Konfiguration
TYPO3 selbst hat eine sehr ausführliche Dokumentation, wie man den CKEditor einrichtet. Im Folgenden daher nur eine kurze Beschreibung, wie wir die Konfiguration selbst einbinden.
Die Konfiguration wird im YAML-Format geschrieben. Wir packen diese natürlich in unser SitePackage z.B. in
sitepackage/Configuration/RTE/Default.yaml
Diese YAML-Datei füllen wir gleich, erst noch weitere Konfiguration. In unserer ext_localconf.php
ergänzen wir
|
|
Das Letztere gibt an, dass wir eine TSconfig brauchen. Man kann mehrere Konfigurationen hinterlegen. Wir wollen erst mal nur eine Konfiguration für alles, daher steht in unserer RTE.tsconfig
nur
RTE.default.preset = sitepackage
YAML-Konfiguration
Achtung, jetzt kommt die komplette YAML-Konfiguration. Das meiste wird auch in der TYPO3 Configuration Reference erklärt. Daher werden anschließend nur wesentliche Punkte der Konfiguration erläutert.
|
|
Hausgemachte Plugins
Zeilen 9 - 13
|
|
sitepackage_responsivetable
Dieses Plugin stellt sicher, dass Tabellen auch responsiv (quer scrollbar) sind.
sitepackage_dataattributes
Dies ermöglicht in HTML-Tags zusätzliche data-type
-Attribute hinzuzufügen. Dies ist in dem Beispielprojekt nötig, da zu einer Liste auch individuelle (aber vordefinierte) Icons hinzugefügt werden können sollen.
Eine solche Extension zu erstellen ist gar nicht schwer. Die CKEditor-Doku lehrt dies pädagogisch vorbildlich am Beispiel eines Simple CKEditor 4 Plugin.
Styling mit webpack
Vorab die relevanten Zeilen und deren Bedeutung:
|
|
Zeile 15
Dies ist die CSS-Datei, mit welcher wir den CK-Editor mit Styling beliefern damit richtiges WYSIWYG-Gefühl aufkommt.
Zeile 16
Ein paar zusätzliche Klassen. Hierbei handelt es sich um Klassen die im Frontend dem Body-Tag hinzugefügt werden und für das Styling nötig sind.
Im CKEditor wollen wir nicht das gesamte CSS der Website laden, sondern nur jene Teile, die für das Styling des Textes relevant sind. Je nach Komplexität des Projektes geht das ansonsten auf die Performance im Backend.
Wir arbeiten in unseren TYPO3-Projekten mit Webpack Encore und der Extension typo3_encore von Sebastian Schreiber. An dieser Stelle: Vielen Dank für diese tolle Extension! 👏
Passgenaue CSS-Datei mit webpack erstellen
In der webpack.config.js
fügen wir einen Style Entry
hinzu, weil wir nur eine CSS-Datei erstellen wollen:
.addStyleEntry('rte', './assets/rte.scss')
In der rte.scss
laden wir dann nur die für die Typografie notwendigen SCSS-Dateien, die wir natürlich alle fein aufgesplittet haben und somit modular laden können. Damit wirklich immer alle relevanten Styles geladen werden, schreiben wir alle Styles für den CKEditor eine eine SCSS-Datei und laden diese in der rte.scss
:.
// Pull in global typography
@import 'basics/rte-styles';
Vorteil:
Wenn wir später noch mehr Textstyling hinzufügen werden wir auch nur in dieser Datei arbeiten und es wir automatisch auch im CKEditor erscheinen. Nice.
Interessante extraPlugins
Plugin autogrow
Zeilen 17 - 19
und 54
|
|
|
|
15 - 17
lässt sich wohl nicht besser beschreiben als in der Config-Doku von CKEditor.
Kurz mag ich es dennoch zusammenfassen: Das Eingabefenster hat leer seine vorkonfigurierte Höhe, wächst jedoch mit der Eingabe bis zu einer bestimmten Höhe und lässt unterhalb bis zu dieser Höhe immer etwas Luft. Das ist sehr angenehm, weil der Text dann nicht immer am unteren Rand klebt.
Plugin wordcount
Zeile 52
|
|
wordcount
lässt fast schon Word-Gefühle aufkommen. Wir sehen wir direkt in TYPO3 die Anzahl an Sätzen, Wörtern und Zeichen:
![Ansicht des CKEditor-Plugins wordcount](blog/typo3/ckeditor-in-typo3-sauber-konfigurieren/images/plugin-wordcount.png)
Sonstiges
Natürlich entfernen wir alle Buttons die Redakteur:innen nicht benutzen sollen (Zeilen 57 - 64
), anderenfalls kommt am Ende nicht bei rum, was wir uns gewünscht haben…
Außerdem sind es weniger Buttons und das ist für die Bedienung grundsätzlich nicht verkehrt.
So, geschafft. Das war ein Ritt. Danke und bis zum nächsten Mal! 👋