Anpassung des RTE-HTMLArea

Nach dem ich mich gestern mit der Konfiguration des Typo3-eigenen WYSIWYG-Editors rumgeschlagen habe, stellte sich bei mir die Überzeugung ein, dass dieses hässliche Entlein doch gar nicht mal so schlecht ist. Für Redakteure lassen sich gezielt eigene Style-Anweisungen einbinden und freigeben. Dadurch wird verhindert, dass das festgelegte Design durch ein reines Kopieren aus Word heraus verhunzt wird – gleichzeitig wird aber dem Wunsch entsprochen, Texte ansprechend formatieren zu können.

Zunächst sollten die benötigten Styleanweisungen in ein separates Template geschrieben werden:

p.kleine-schrift {
font-size: 10px;
}

Damit die Anweisungen auch später im Frontend verwendet werden, muss im root Template (Setup) das Stylesheet auch eingebunden werden, zum Beispiel so:

page.includeCSS {
file1 = fileadmin/template/style_add.css
}

Anschließend erfolgt die Konfiguration des RTE über die Seiteneigenschaften der root-Seite. Dort werden die gewünschten Änderungen (unter Optionen) in die TSconfig geschrieben.

Zunächst wird die CSS-Datei eingebunden:

# RTE Konfiguration
RTE.default.contentCSS = fileadmin/template/rte.css
RTE.default.useCSS = 1
RTE.default.showTagFreeClasses = 1

Dann erfolgt die Benennung der Eigenschaft für die Darstellung im RTE:

RTE.classes {
kleine-schrift {
name = Kleine Schrift
value = font-size: 8px;
}
}
ignoreMainStyleOverride = 1

Der mit festzulegenden Wert stellt im RTE den markierten Absatz so da, wie er später auch im Frontend zu sehen sein wird.

Zuletzt muss die eigene Klasse noch zur Liste der erlaubten Klassen hinzugefügt werden, da sie ansonsten beim abspeichern über den RTE gefiltert wird:

RTE.default.proc.allowedClasses := addToList(kleine-schrift)

An dem kleinen Beispiel lassen sich bereits die Möglichkeiten erkennen, die der RTE bietet. Mit weiteren Konfigurationen lassen auch andere Schriftarten und Farben einbinden. Eine Verwendung von zusätzlichen, per Extension eingebundenen Editoren wie
TinyMCE ist somit nicht mehr nötig.

Kommentar verfassen