TYPO3 und der RTE

Mit der Sys-Extension rte erhielt TYPO3 in der Version 3.8 erstmals eine Art "Aufsatz" für den HTML-Tag <textarea>. Damit war es erstmals möglich in eine textarea formatierten Text einzutragen. Heutzutage besitzt nahezu jedes x-beliebige Forum einen sogenannten RTE (RichText-Editor), um in Beiträgen Optionen wie fett, kursiv und unterstreichen realisieren zu können.

Ab Version 4.0 wurde die Sys-Extension rte durch die Sys-Extension rtehtmlarea ersetzt. Als Alternative zur rtehtmlarea kann man sich aus dem Repository von TYPO3 auch die Extension tinyrte herunterladen. Der Unterschied zwischen den einzelnen RTEs ist die Art und Weise, wie man sie konfigurieren kann und sie unterscheiden sich auch optisch. Vom Hören-Sagen heißt es, dass die rtehtmlarea unglaublich schwer zu konfigurieren sei. Ein Grund mehr, sich diese RTE hier einmal genauer anzuschauen.

Die Sys-Extension rtehtmlarea besitzt schon von der Installation her vordefinierte Block- und Textstile wie rechtsbündig, zentriert, linksbündig, Text mit grauem Hintergrund und einige andere Stile mehr. Einen Nachteil aber hat so eine RTE-Box dennoch:

Eine Webseite unterliegt normalerweise immer einem ganz bestimmten Design. Wenn schwarzer Text verwendet werden soll, dann sollte sich diese Schriftfarbe über alle Webseiten dieser Homepage fortsetzen. Dank einer RTE können die Redakteure die Farben aber selber auswählen, können Tabellen erstellen und die Schrift dank verschiedener Überschriften-Stile viel zu groß anzeigen lassen. Es gibt die Möglichkeit, die RTE-Box nur mit den Optionen zu versehen, die für das Design der Homepage erlaubt sind. Diese Einstellungen werden über die sogenannte User TS-Config und die Page TS-Config ermöglicht.

Die Installations-Voreinstellungen für die rtehtmlarea kann man sich entweder über die Datei:

http://[Homepage]/typo3/sysext/rtehtmlarea/res/typical/pageTSConfig.txt

oder direkt im TYPO3-Backend anschauen:

Web -> Info -> root-Seite auswählen -> Im Drop Down-Feld: Seiten TS-Config auswählen -> Im Drop Down-Feld darunter RTE. auswählen

RTE.classes

WICHTIG!

Die Stile, die in den Drop Down-Listen der RTE angezeigt werden sollen, müssen in einer CSS-Datei definiert werden.
Mit den Klassen, die in der TS-Config definiert werden, kann man nur die Einträge
(die ihren Ursprung in der CSS-Datei haben) verschönern.

Beipiel: In der CSS-Datei steht:

span.name-of-person { color: #10007B; }

Das Script des RTE erkennt nun automatisch, dass es sich bei dem span-Tag um einen Text-Stil handelt, also um einen Bereich innerhalb eines Satzes, der z.B. fett geschrieben werden soll. Wenn in die TS-Config diese name-of-person-Klasse nicht weiter definiert wird, erscheint in dem Drop Down-Feld für Textstile ein Eintrag: name-of-person. Mit Hilfe der TS-Config kann dieser CSS-Klasse nun ein Name und ein Wert hinzugefügt werden. In der Original-Datei sieht es folgendermaßen aus:

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

Dieser LLL:EXT-Eintrag verweist auf eine Sprachdatei: locallang.xml, in der für die Klasse name-of-person der deutsche Spracheintrag für ein deutsches TYPO3-Backend herausgesucht wird. In dem RTE steht also Name der Person und nicht name-of-person. Mit value kann für diesen Eintrag in der Drop Down-Liste ein eigenes Design erstellt werden, das unabhängig von der Definition in der CSS-Datei ist. Heißt: In der CSS-Datei wird z.B. definiert, dass die Klasse name-of-person in roter Schrift dargestellt werden soll, aber mit dem value-Eintrag in der TS-Config, wird definiert, dass das Wort "Name der Person" in der Drop Down-Liste z.B. in grün angezeigt werden soll. Dieses Beipiel soll nur zeigen, dass es sich hierbei um zwei verschiedene Systeme handelt. Natürlich macht es Sinn, beide Einträge in der gleichen Farbe darstellen zu lassen.

Neben den Text-Stilen (span) gibt es auch die Block-Stile. Diese wirken sich immer auf den kompletten Absatz aus. Bekannte HTML-Tags, die für Absätze zuständig sind, sind z.B.: p, h1, h2 und td. Der Unterschied ist: Wird nur ein Teil eines Absatzes markiert und der Block-Stil geändert, wirkt sich diese Änderung auf den kompletten Absatz aus und nicht nur auf die aktuelle Markierung.

RTE.classesAnchor

Anchor (kurz a) heißt auf Deutsch: Anker. Heißt: Hier geht es um die Links in der RTE-Box, die über ein POP-Up-Fenster eingefügt werden können. Auch hier erkennen die Scripte der rtehtmlarea automatisch, dass es sich bei a um Links handelt und fügt diese im Pop-Up-Fenster in die entsprechenden Drop Down-Listen ein.

In der CSS-Datei sieht ein Link folgendermaßen aus:

a.internal-link-new-window {}

Die TS-Config sieht bei Links schon etwas anders aus:

internalLinkInNewWindow {
  class = internal-link-new-window
  type = page
  titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:internal_link_new_window_titleText
}

Das erste was auffällt ist, dass es von den Eigenschaften her KEINE Ähnlichkeit mit den Eigenschaften aus den RTE.classes gibt. In der englischsprachigen Doku steht:

Attaches special properties to the classes.

Soll heißen mit RTE.classesAnchor können spezielle ZUSÄTZLICHE Eigenschaften zu den RTE.classes definiert werden. Es ist also durchaus möglich eine Link-Klasse in beiden Bereichen (RTE.classes und RTE.classesAnchor) ODER NUR im Bereich RTE.classesAnchor zu haben. internalLinkInNewWindow ist in diesem Falle nur eine weitere interne Bezeichnung, die selbst vergeben werden kann.

RTE.classesAnchor besitzt 5 Eigenschaften:

• class

Der Name zu der Klasse, wie sie in der CSS-Datei definiert wurde

• type

5 Linktypen stehen für die Eigenschaft type zur Auswahl:

- page (Für interne Links)

- url (Für externe Links)

- file (Für Dateidownloads)

- mail (Für eMail-Links)

- spec (Spezielle vom Benutzer definierte Links)

• image

Den Links können Bilder zugeordnet werden

• altText

Den Linkbildern können hiermit sogenannte AltTexte zugeordnet werden

• titleText

Dieser Titel hat nichts mit dem Webseitentitel zu tun, sondern mit dem Text, der in der Statusleiste erscheinen soll, wenn man mit der Maus über den Link fährt