TYPO3 und der RTE

aus WB Wiki; freien Wissensdatenbank rund ums Thema Computer
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

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 schreiben sie in einer eigenen TS-Config komplett neu.
  • Sie verwenden TYPO3-Funktionen (removeFromList() und addToList()), um aus einer Liste von Werten die gewünschten 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ückgesetzt 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 explizit Buttons aus der Liste entfernen.

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:

  1. class - Der Name zu der Klasse, wie sie in der CSS-Datei definiert wurde
  2. type - 5 Linktypen stehen für die Eigenschaft type zur Auswahl:
    1. page (für interne Links)
    2. url (für externe Links)
    3. file (für Dateidownloads)
    4. mail (für eMail-Links)
    5. spec (spezielle, vom Benutzer definierte Links)
  3. image - den Links können Bilder zugeordnet werden
  4. altText - den Linkbildern können hiermit sogenannte AltTexte zugeordnet werden
  5. 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

In diesem Bereich gibt es sehr viele Möglichkeiten, die RTEs zu konfigurieren. Im Folgenden werden die Befehle mit Ihren Optionsmöglichkeiten gelistet. Die Werte in fett sind Default-Werte. Bitte die Werte OHNE eckige Klammern angeben.

  • enableWordClean = [0,1]
    • Bei sehr vielen Copy&Paste-Aktionen aus z.B. Word werden immer die in Word vorhandenen Formatierungen mitkopiert. Um dieses Verhalten zu unterbinden, setzen Sie diese Option auf 1.
  • removeTrailingBR = [0,1]
    • Wenn beim Firefox, Netscape kein Inhalt eingefügt wird, fügen diese Browser automatisch ein br-Tag in den RTE ein. Um dies zu verhindern, müssen Sie dieser Option den Wert 1 zuweisen.
  • removeComments = [0,1]
    • Sollen HTML-Kommentare beim Abspeichern oder beim Wechseln der HTML-Ansicht entfernt werden?
  • showTagFreeClasses = [0,1]
    • Normalerweise sollte man Klassen immer in der Form p.roteSchrift oder span.blauerHintergrund definieren. Nach Aktivierung dieser Option sind auch Stile dieser Art erlaubt: .roteSchrift und .blauerHintergrund. (Definitionen in der CSS-Datei)
  • disableRightClick = [0,1]
    • Wird diese Option gesetzt, dann kann das Contextmenü der RTE nicht mehr geöffnet werden.
  • useCSS = [0,1]
    • Die Option hört sich nur gut an, mehr aber auch nicht. Diese Option ist nämlich nur für den Firefox und befiehlt dem RTE statt b-, i. und u-Tags die style-Attribute zu verwenden, während die anderen Browser aber weiterhin die b- und i-Tags verwenden. Um dieses Durcheinander zu unterbinden, sollte diese Option auch weiterhin auf Disabled stehen.

Hier ein Beispiel wie der HTML-Text mit der Option 1 ausschaut (nur Mozilla/Firefox):

<span style="font-weight: bold;">Text</span>
  • removeTags = Liste von HTML-Tags
    • Welche HTML-Tags sollen beim Abspeichern oder beim Wechseln zur HTML-Ansicht entfernt werden? Es werden nur die HTML-Tags gelöscht, nicht aber der Inhalt zwischen den beiden Tags.
Beispiel: removeTags = center, font, strike, u
  • removeTagsAndContents = Liste von HTML-Tags
    • Wie oben, nur dass hier auch der Inhalt, der zwischen den beiden HTML-Tags steht, mitgelöscht wird. Dieser Befehl ist sehr wichtig, um z.B. JavaScript-Befehle beim Abspeichern oder Wechseln zur HTML-Ansicht direkt zu löschen.
Beispiel: removeTagsAndContents = style, script
  • showButtons = Liste von Buttons
    • Welche Buttons sollen in der RTE-Box erscheinen?

Beispiel:

showButtons (
  bold, fontsize, center
)

Folgende Buttons sind erlaubt:

blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock, bold, italic, emphasis, deletedtext, big, small, 
underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull,
orderedlist, unorderedlist, outdent, indent, textcolor, bgcolor, textindicator, emoticon, insertcharacter,
line, link, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy,
cut, paste, undo, redo, showhelp, about, toggleborders, tableproperties, rowproperties, rowinsertabove,
rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit,
cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
  • hideButtons = Liste von Buttons
    • Warum hideButtons? Siehe Beispiele in "Aller Anfang ist schwer". Welche Buttons? Siehe "showButtons".
  • keepButtonGroupTogether = [0,1]
    • Mit dieser Option kann man zusammengehörende Buttons gruppieren. Jede Art von Gruppe erhält eine eigene Zeile. Diese Option klappt aber nur im Firefox.
  • showStatusBar = [0,1]
    • Soll die Statusbar der RTE-Box angezeigt werden oder nicht? Mit Hilfe dieser Box kann man erkennen, in welchem HTML-Tag Sie sich derzeit befinden.
  • hidePStyleItems = Liste von HTML-Tags
    • In dem RTE gibt es auch eine Drop Down-Liste, die für Absätze zuständig ist. Mit diesem Befehl kann man bestimmte Einträge aus dieser Liste entfernen.

Beispiel:

hidePStyleItems = pre, address, h1
  • ignoreMainStyleOverride = [0,1]
    • Es gibt ein Default-CSS für den RTE und die Option inlineStyle, um Stile direkt über die TS-Config in die RTE einzufügen. Mit dieser Option kann der Import dieser Stile komplett verhindert werden und es werden nur die Stile aus der angegebenen CSS-Datei verwendet.
  • inlineStyle.[name] = CSS-Definition
    • Wenn ignoreMainStyleOverride = 0 ist, dann kann man hiermit weitere CSS-Stile, die in die Drop Down-Listen aufgenommen werden sollen, definieren.

Beispiel:

inlineStyle.text-alignment (
  p.align-left, h1.align-left { text-align: left; }
  p.align-center, h1.align-center { text-align: center; }
  p.align-right, h1.align-right { text-align: right; }
)

RTE.colors

Mit Hilfe diesen Objektes können die Farben gesetzt werden, die innerhalb der RTE zur Verfügung stehen können. "können" deshalb, weil Sie mit der Option RTE.default.colors nachträglich immer noch bestimmen können, welche Farben erlaubt werden sollen.

Ein Beispiel:

RTE.colors {
  color1 {
    name = Hintergrundfarbe blau
    value = blau
  }
  color2 {
    name = Eine andere Farbe
    value = #FF00FF
  }
}

Um alle Farben zu erlauben, muss die Option RTE.default.colors leer oder mit allen definierten Farbdefinitionen gefüllt werden. Um nur eine Farbe zu erlauben, muss der Wert so aussehen:

RTE.default.colors = color2


RTE.default.proc

Da dieses Thema sehr umfangreich ist, habe ich ihm einen Extra-Artikel gewidmet:

- TYPO3 RTE API