TYPO3 und der RTE: Unterschied zwischen den Versionen

Version vom 19. September 2008, 15:37 Uhr

Was ist 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

Dieser Auflistung kann man sämtliche Voreinstellungen entnehmen, aber wie können die geändert werden? Dazu gibt es drei verschiedene Vorgehensweisen:

• Sie löschen in einem Zweig (RTE.classes, RTE.classesAnchor, ...) alle Einstellungen und schreibt sie in einer eigenen TS-Config komplett neu.
• Sie verwenden TYPO3-Funktionen (removeFromList() und addToList()), um aus einer Liste von Werten die gewünschten Werte herauszulöschen oder Neue hinzuzufügen. Dazu finden Sie auf der Webseite von Site42 eine genauere Anleitung.
• Sie überschreiben einzelne Werte (z.B. RTE.default.contentCSS = fileadmin/templates/css/rte.css)

Aller Anfang ist schwer

Da es unglaublich schwer ist einen guten Anfang zu finden, sollten Sie einmal alle TS-Config-Voreinstellungen löschen. Dazu bitte NICHT die Datei im rtehtmlarea-Ordner löschen, sondern bitte wie im folgenden Beispiel alle Einstellungen per TS-Config löschen:

RTE.classes >
RTE.classesAnchor >
RTE.default >

Das hat den Vorteil, dass alle ursprünglichen Einstellungen wieder zurück gesetzt werden, wenn diese 3 Zeilen aus der TS-Config entfernt werden. Die TS-Config ist in den Seiteneinstellungen einer jeden Seite zu finden. Der beste Ort für die TS-Config ist die root-Page, denn von dort aus vererben sich alle Einstellungen auch auf die Unterseiten. Heißt: Wir ändern den RTE auf der root-Seite und nach dem Leeren des Caches (sehr Wichtig) haben alle RTEs auf allen Unterseiten die angegebenen Einstellungen übernommen.

Schauen Sie sich nun ihren RTE an und Sie werden eine bis auf drei Buttons leere RTE-Box vorfinden. Um nun ein bisschen mit dem RTE "rumzuspielen" können Sie nun Stück für Stück weitere Einstellungen hinzufügen:

RTE.default.showButtons (
  bold, italic, subscript
)

Wichtig: Cache leeren!

Ihr RTE hat nun ein paar Schaltflächen mehr erhalten. Das Gegenteil von showButtons ist hideButtons. Wozu hideButtons, wenn ich doch mit showButtons einfach alle Buttons eintrage, die ich brauche? Ganz einfach: Es gibt die Möglichkeit mit RTE.default.showButtons = * ALLE Buttons anzeigen zu lassen. Jetzt können Sie mit hideButtons explicit Buttons aus der Liste herausnehmen.

Hier die komplette Beispiel TS-Config:

RTE.classes >
RTE.classesAnchor >
RTE.default >

RTE.default.showButtons = *
RTE.default.hideButtons (
  bold, italic
)

Wichtig! Eine Notation ala RTE.default.hideButtons ( bold, italic ) funktioniert nicht! Nach jeder Klammer auf ( und vor jeder Klammer zu ) MUSS ein Return eingefügt werden.

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.

RTE.default