Anleitung rtehtmlarea konfigurieren und eigene Klassen anlegen

Es existieren zahlreiche Anleitungen zur Konfiguration des Rich Text Editors (rtehtmlarea) in Typo3, welche ausführlich dokumentiert sind. Klar, der Rich Text Editor ist das Herz von Typo3, denn es ist in der Regel das Hauptwerkzeug des Redakteurs und daher sollte sich der Typo3-Administrator auch ausführlich mit dem Handbuch beschäftigen bzw. die Funktionsweise von rtehtmlarea verstehen. Trotzdem ist aller Anfang schwer und ein Administrator, der sich das erste Mal an die Konfiguration des "RTE" heranwagt, steht erst einmal auf verlorenen Posten.

Mini-How-To: Rich Text Editor konfigurieren und eigene Klassen definieren
Mini-How-To: Rich Text Editor konfigurieren und eigene Klassen definieren

In diesem Mini-How-To wird bewusst darauf verzichtet, sich mit den Tiefen des Rich Text Editors zu beschäftigen. Vielmehr soll dem Administrator eine Strategie vermittelt werden, wo er bei der Konfiguration beginnt, welche Konfigurationsvorlagen verwendet und wie eigene CSS-Klassen bzw. der Rich Text Editor an die individuellen Bedürfnisse eingericht werden können. Denn warum soll man das Rad neu erfinden, wenn bereits eine vorgegebene RTE-Konfiguration vorhanden ist?

1. Schritt: Installation des Rich Text Editors und Konfiguration der Standard-Werte

Die Extension rtehtmlarea ist standardmäßig installiert. Bevor man überhaupt mit der komplizierten Typo3-Syntax im TSConfig beginnt, wirft man einen Blick in die allgemeine Konfiguration von rtehtmlarea im Erweiterungsmanager. Dazu klickt man im Typo3-Backend auf Ext Manager, dann auf Loaded Extensions und anschließend auf die Erweiterung. Hier ist es nun möglich, allgemeine Einstellungen vorzunehmen. Hier sollte man die Häkchen bei Enable images in the RTE (aktiviert Bilderfunktion), Enable Mozilla/Firefox extension und Enable click-enlarge on images aktivieren.

Wichtiger aber ist Default configuration settings, denn hier gibt es drei Vorlagen (minimal, typical, demo), wie der Rich Text Editor konfiguriert werden kann. Ziel ist es nun, sich für eine der drei Konfiguration zu entscheiden, um diese dann an die individuellen Bedürfnisse anzupassen.

 

Zuerst wählt man eine Vorlage der RTE-Konfiguration aus
Zuerst wählt man eine Vorlage der RTE-Konfiguration aus

Eigentlich entscheidet man sich nur zwischen typical und demo, denn minimal ist unsere Ausgangskonfiguration, die wir dann mit Klassen und Funktionen erweitern. Nach der Auswahl stellen wir nun minimal ein und fahren mit Schritt 2 vor.

2. Schritt: Vorlage kopieren

Die RTE-Vorlagen befinden sich als Textdateien in folgendem Verzeichnis: typo3/sysext/rtehtmlarea/res. Je nachdem für welche Vorlage man sich entschieden hat öffnet man die pageTSConfig.txt im Verzeichnis demo bzw. typical mit einem Editor. Dieses ist fast die komplette RTE-Konfiguration, die wir nun in unser TSConfig kopieren. Dazu klickt man auf die Root-Seite und wählt Seiteneigenschaften bearbeiten. Unter der Registerkarte Optionen kopiert man den Text in das TSConfig-Feld.

Rich Text Editor im TSConfig konfigurieren
Rich Text Editor im TSConfig konfigurieren

In diesem Fall wurde die demo-Konfiguration gewählt. Nach Abspeichern und Neuaufruf des Rich Text Editors sollte die gewohnte Demo-Ansicht erscheinen. Die vorgegebenen Klassen müssen nun an die individuellen Bedürfnisse angepasst werden.

3. Schritt: CSS-Datei für den Rich-Text-Editor kopieren

Damit der Rich Text Editor die CSS-Klassen auch verwendet und anzeigt, müssen diese in einer CSS-Datei existieren. Im Prinzip muss man die CSS-Klassen an zwei Stellen definieren: in der TSConfig und im CSS-Stylesheet. Jetzt denken viele im ersten Augenblick "Mensch, dann gebe ich einfach das Stylesheet meiner Webseite an, da stehen alle Textformatierungen". Das ist aber nicht ratsam, denn somit zeigt der RTE auch das Layout der Webseite an, was mehr hinderlich als fördernd ist. Daher sollte man alle Textformatierungen in eine separate CSS-Datei ausgliedern und diese dem Rich Text Editor zuweisen. Natürlich müssen die Klassen auch Typo3 allgemein zugewiesen werden, ansonsten sieht man die Formatierungen im Frontend nicht.

    includeCSS {
         file1 = fileadmin/template/style.css
         file2 = fileadmin/template/rte.css
    }

Für die RTE-CSS-Datei gibt es aber ebenfalls eine Vorlage seitens Typo3, die verwendet werden kann: typo3/sysext/rtehtmlarea/htmlarea/plugins/DynamicCSS/dynamiccss.css

Hier findet man auch die Klassen, die der Rich Text Editor standardmäßig anbietet. Am besten man kopiert den Inhalt in eine eigene Datei im fileadmin. Auf keinen Fall sollte man die dynamiccss.css direkt bearbeiten, da diese beim nächsten Update überschrieben wird.

Nun weist man die neue CSS-Datei dem Rich Text Editor zu, welches unsere erste Änderung an der TSConfig bedeutet. Dazu fügt man innerhalb des RTE.default Abschnittes den Eintrag contentCSS hinzu:

## Default RTE configuration
RTE.default {

    contentCSS = fileadmin/template/rte.css

    ## Markup options (htmlArea RTE only)
    enableWordClean = 1
    removeTrailingBR = 1
    removeComments = 1
    removeTags = center, o:p, sdfield
    removeTagsAndContents = style,script

4. Schritt: RTE an die individuellen Bedürfnisse anpassen

Nun ist es Zeit, den Rich Text Editor an die eigenen Wünsche anzupassen. Jedes einzelne Detail der RTE-Konfiguration zu erläutern, würde den Rahmen dieses Artikels sprengen. Aus diesem Grund werden anhand eines Beispiels die Textstyle-Vorgaben important, name-of-person, detail geändert werden.

Zuerst legt man die gewünschten Formatierungen in der CSS-Datei an:

span.roteSchrift { color: #b11117; }
span.graueSchrift { color: #C0C0C0; }
span.grueneSchrift { color: #5e912b; }

Anschließend durchforstet man die TSConfig:

    important {
        name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:important
        value = color: #8A0020;
    }
    name-of-person {
        name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:name-of-person
        value = color: #10007B;
    }
    detail {
        name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:detail
        value = color: #186900;
    }

Diese drei Einträge definieren, wir die Auswahlbox textstyle im Rich Text Editor auszusehen hat. name bestimmt den Eintrag in der Auswahlbox und value die Farbe. Diese Einträge passen wir nun unseren Vorstellungen an:

    roteSchrift {
        name = Rote Schrift
        value = color: #8A0020;
    }
    graueSchrift {
        name = Graue Schrift
        value = color: #C0C0C0;
    }
    grueneSchrift {
        name = Grüne Schrift
        value = color: #5e912b;
    }

Anschließend müssen noch die Klassen an folgenden Stellen angepasst werden:

    proc.allowedClasses (
        external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
        align-left, align-center, align-right, align-justify,
        csc-frame-frame1, csc-frame-frame2,
        component-items, action-items,
        component-items-ordered, action-items-ordered,
        roteSchrift, graueSchrift, grueneSchrift
        indent
    )

classesCharacter = roteSchrift, graueSchrift, grueneSchrift

Und damit werden nun die neu definierten CSS-Klassen im Rich Text Editor angezeigt:

 

Optional: Welche Buttons sollen im RTE angezeigt werden

Mit dem Eintrag showButtons * werden alle Buttons angezeigt. Das ist aber in der Regel nicht erwünscht, so dass man die Buttons manuell definieren muss:

showButtons (
        class, blockstylelabel, blockstyle, textstylelabel, textstyle,
        formatblock, bold, italic, subscript, superscript,
        orderedlist, unorderedlist, outdent, indent, textindicator,
        insertcharacter, link, table, findreplace, chMode, removeformat, undo, redo, about,
        toggleborders, tableproperties,
        rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit,
        columninsertbefore, columninsertafter, columndelete, columnsplit,
        cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
)

Eine komplette Liste der Buttons gibt es im Manual von rtehtmlarea.