Ansehen RTE einrichten
htmlArea RTE
Seit Version 4 von Typo3 ist der Rich Text Editor »htmlArea RTE (rtehtmlarea)« fester Bestandteil der Typo3-Installation. Ich beziehe mich im folgenden auf diesen RTE, nicht auf den älteren.
Nach der Installation muss der RTE konfiguriert werden.
Grundeinstellungen, vor allem zum Bildupload
Standardmäßig ist der Bildupload innerhalb des RTE nicht aktiv. Man muss im Extensionsmanager htmlArea öffnen und dort die Option »Enable images in the RTE« aktivieren. Es sind gibt weitere interessante Grundeinstellungen: DAM media Browser einschalten, Accessability-Icons für Links aktivieren und so weiter.
Sehr wichtig sind die »Default configuration settings«: damit wird festgelegt, welche grundlegende Set an Möglichkeiten und Werkzeugen standardmäßig und ohne weitere Konfiguration zur Verfügung stehen. Normalerweise wird bei der Installation »Typical« eingestellt; die beiden anderen erfordern in jedem Fall zusätzlich eine manuelle Konfiguration im TSconfig.
Konfiguration im Page TSconfig
########## Grundeinstellungen ##########
RTE.default {
useCSS = 1
ignoreMainStyleOverride = 0
# Damit kann die übermäßig große Schriftdarstellung in den Tabellen
# im Firefox korrigiert werden. Ausserdem ist es möglich, die grundlegende
# Darstellung im RTE-Eingabefenster zu konfigurieren: Schrift, Schrifgrößen etc.
mainStyleOverride_add.TD =font-size:12px;
mainStyleOverride_add.H1 =font-size:16px;color:#a7b198;
mainStyleOverride_add.H2 =font-size:16px;color:#a7b198;
# Überschreiben der Default-Einstellungen zu den erlaubten Tags
proc.allowTags=code, table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, pre, blockquote, strong, em, b, i, u, sub, sup, strike, a, link, img, nobr, hr, center, font, tt, q, cite
proc.entryHTMLparser_db.allowTags<RTE.default.proc.allowTags
proc.entryHTMLparser_db.tags.a.fixAttrib.title.unset = 1
# das ist nicht unbedingt erforderlich, wenn man in den »Default
# configuration settings« die Option »Typical gewählt hat«. Wenn
# man eine der anderen beiden eingestellt hat, muss man diese Zeile anpassen.
# Welche Buttons sollen im RTE gezeigt werden?
showButtons = *
hideButtons = strikethrough, lefttoright, righttoleft
keepButtonGroupTogether = 1
# wenn den Redakteuren eigene Klassen zur Verfügung gestellt werden, müssen
# diese in einem Stylesheet extra dem RTE zur Verfüung gestellt werden.
contentCSS=fileadmin/css/screen/content_rte.css
# nur Klassen mit Tags erlauben. z. B. : p.klasse {border:1px solid #ccc}
showTagFreeClasses=0
# hier wird definiert, welche Klassen den Redakteuren zur
# Verfügung gestellt werden: die vorhandenen Klassen für die
# Zeichenformatierung werden hier ausgeschaltet:
classesCharacter =
# die vorhandenen Klassen zum Formatieren von Absätzen werden
# durch die selbstdefinierten Klassen überschrieben:
classesParagraph = linie_danach,linie_davor,kasten_gruen_hg
# Tipp: wenn die default-Klassen übernommen und nur ergänzt
# werden sollen, dann so schreiben:
# classesParagraph := linie_danach ...
# Klassendefinition für die gesamte Tabelle
classesTable = tabelle01
# Klassendefinition für die einzelnen Zellen
classesTD = zelle01,zelle02
# das kann für tr, thead, tbody ebenfalls gemacht werden
# Jetzt müssen die einzelnen Klassen noch explizit erlaubt werden
proc.allowedClasses = linie_danach,linie_davor,kasten_gruen_hg,tabelle01,zelle01,zelle02
# Schriften erlauben
fontFace = font1, font2
# Farben erlauben
colors = color1, color2
}
############ Achtung!! ###############
# Alle selbstdefinierten Klassen müssen in dem oben eingebundenen
# Stylesheet auch definiert sein!
# Dabei muss beachtet werden, dass Tag-lose Klassen durch showTagFreeClasses = 0
# ausgeschaltet wurden:
# Falsch: .linie_danach {border-bottom: ...}
# Richtig: p.linie_danach {border-bottom: ...}
# Genauso bei den Tabellen.
#######################################
########### Definition der Klassenbezeichnungen für die Redakteure
RTE.classes {
# hier werden die Namen der Klassen »lesbar« gemacht
linie_davor.name = Linie davor
linie_danach.name = Linie danach
kasten_gruen_hg.name = Kasten: grüner HG
kasten_gruen_r.name = Kasten: grüner Rahmen
kasten_info.name = Kasten: Info-Knopf
tabelle01.name = Standard in Blau-Grau
zelle01.name = Zellen blauer Hintergrund
zelle02.name = Zellen ohne Hintergrund
zelle03.name = Zellen grauer Hintergrund
# Wenn man will kann man die Anzeige der Klassen in den Menüs für die
# Redakteure auch noch optisch anpassen:
linie_davor.name = Linie davor
linie_davor.value = border-bottom: 1x solid #ff0000
# damit erscheint der Eintrag im Menü schon so formatiert, wie
# später der Absatz. Nötig ist das aber nicht.
}
############# Definition de Schriftmenüs ###########
RTE.fonts {
font1 {
name = Verdana
value = verdana,arial,helvetica,sans-serif
}
font2 {
name = Georgia
value = georgia, times, 'times new roman', serif
}
}
########### Definition des Farbmenüs ##############
RTE.colors {
color1 {
name = t3 blau
value = #0000ff
}
color2 {
name = t3 grün
value = #00ff00
}
}
########### Definition der Link-Klassen ##############
RTE.classesAnchor {
externalLink {
class = ext-link
type = url
image=fileadmin/icons/ext-link.gif
}
externalLinkInNewWindow {
class = ext-link2
type = url
image=fileadmin/icons/ext-link2.gif
}
internalLink {
class = int-link
type = page
image=fileadmin/icons/int-link.gif
}
internalLinkInNewWindow {
class = int-link2
type = page
image=fileadmin/icons/int-link2.gif
}
download {
class = download
type = file
image=fileadmin/icons/down.gif
}
mail {
class = mail
type = mail
image=fileadmin/icons/mail.gif
}
}
Achtung Browsercache!
Die Arbeit mit dem RTE hat einige Tücken. Wird das Stylesheet für die selbstdefinierten Klassen geändert, so nimmt dies der RTE erst zur Kenntnis, wenn die Stylesheetdatei erneut geladen und so der Browsercache überschrieben wird. Der einfachste Weg ist, das Stylesheet direkt im Browser zu öffnen und nach jeder Änderungen mit gedrückter Umschalt-Taste neu zu laden. Dann wird das Stylesheet im Browsercache aktualisiert und der RTE hat eine Chance, die geänderten Inhalte zu sehen und darauf zu reagieren.
Tipps
Die Erweiterung »css_styled_content« bereinigt das HTML, das der RTE ans Frontend übergibt. Dort ist zum Beispiel geregelt, dass eine Tabelle nur die Klasse »contenttable« tragen darf. Wenn Sie also den Redakteuren ermöglichen wollen, Tabellen mit eigenen Klassen zu versehen, so müssen Sie folgenden Code in das TypoScript-Setup Ihrer Seite eingeben (Achtung: nicht ins Page TSConfig!):
############# nötig, damit der RTE Klassen an Tabellen hängt ########
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list >
Diese Einstellung hat aber einen Nebeneffekt: wenn im RTE zum Zeitpunkt des Sicherns die Rahmenansicht für Tabellen aktiviert war, steht anschließend im Quellcode:
<table class="htmlarea-showtableborders eigeneKlasse">
Das ist zwar nicht schön, schadet aber auch nicht. Man kann es vermeiden, indem man vor dem Speichern im RTE die Rahmen der Tabellen abschaltete – aber das würde ich meinen Redakteuren lieber nicht erklären :-)
Es gibt noch eine Reihe weiterer Einstellungen, mit denen »css_styled_content« in den Output des RTE eingreift; sie sind alle in lib.parseFunc_RTE zu finden. Am einfachsten über den TypoScript Objectbrowser. Das betrifft zum Beispiel die Ausgabe der Tabelleninhalte, die von lib.parseFunc_RTE mit einem <p>-Tag umgeben werden:
# Ausschalten der p-Tags für alleinstehende Zeilen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.nonWrappedTag = p
Ich ziehe es vor, einfach über die CSS-Stile diese Absätze mit Rand 0 zu versehen, dann stören diese <p>-Tags nicht; aber wer diese Tags raus haben will, kann obige Zeile verwenden und das p am Ende einfach weglassen. Man muss sich dann aber im Klaren sein, dass dies für alle Texte ohne expliziten Tag gibt.
Man kann die p-Tags in den Tabellenzellen auch so abschalten:
# #wichtig, damit die nicht in p gewrappt werden
lib.parseFunc_RTE.externalBlocks = ul,ol,table
#nochmaliges parsen von tabellenzellen auschalten, damit inhalte nicht wieder in p gepackt werden
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.callRecursive = 0
Jetzt wird allerdings auch das Parsen der Links abgeschaltet; wenn man Links in den Tabellenzellen benötigt, dann sollte der Code noch so ergänzt werden:
#nachträgliches ermöglichen von Links in Tabellenzellen
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc {
makelinks = 1
makelinks.http.keep = scheme,path,query
makelinks.mailto.keep = path
tags {
link = TEXT
link {
current = 1
typolink.parameter.data = parameters : allParams
}
}
}
Quelle: sk-typo3.de
# Ausschalten der p-Tags für alleinstehende Zeilen
lib.parseFunc_RTE.externalBlocks = ul,ol,table
Über die obige Konfiguration werden Icons für die Links definiert. Wenn man die voreingestellten Icons deaktivieren will, hilft dieser Code:
RTE.classesAnchor {
externalLink.image >
internalLink.image >
internalLinkInNewWindow.image >
download.image >
mail.image >
}
Um zu erreichen, dass der RTE Bilder nicht in einen <p>-Tag packt, hilft dieser Code:
RTE.default.proc.allowTagsOutside = img, hr
Weiterführende Links
- Manual auf Typo3.org Hinweis: das Manual ist nicht auf dem üblichen Weg zu finden; die Extension gehört zwar mittlerweile zur Standardinstallation, aber sie wird in der Core-Dokumentation gelistet. Es gibt deshalb eine eigene Extension nur für das Manual von htmlArea RTE.
- Artikel Dynamisches CSS mit htmlArea RTE der Usergroup NRW. Das finde ich sehr informativ; hier gibt es noch eine Reihe weiterer Tipps.
- eine interessante Beispielkonfiguration aus dem typo3.net-Forum von ms_k
- Eine sehr ausführliche Anleitung gibts bei site42: Wie konfiguriert man den RTE htmlArea?. Das ist schon fast eine Übersetzung des Manuals – sehr empfehlenswert.
Category:Typo3 -> RTE
Category:Typo3 -> Extensions