Zum Inhalt springen

Rich Text Editor HTMLArea

Der Rich Text Editor (RTE) ist das zentrale Werkzeug für die Eingabe und Bearbeitung von Texten in TYPO3. Die Extension "HTMLArea" wurde bis zur TYPO3 Version 7 eingesetzt und ab der Version 8 vom rte_ckeditor abgelöst.

Die Werkzeugleiste ist von Programmen wie Word oder OpenOffice bekannt, so dass Redakteure sich schnell zurechtfinden.

Der Editor ist als System-Erweiterung Bestandteil des TYPO3 Quellcodes, passt also immer zur jeweiligen Version. Alternativ lassen sich auch andere Editoren in TYPO3 verwenden. Bei einem Udpate der TYPO3 Version muss jedoch in der Regel abgewartet werden, bis auch der jeweilige alternative Editor für die neue Version angepasst wurde. Daher empfehlen wir den Einsatz des 'Standard' Editors.

Das Erscheinungsbild und die Funktionen lassen sich individuell konfigurieren. Die Anleitungen auf dieser Seite zeigen die Möglichkeiten.

Button "als einfachen Text einfügen" konfigurieren

Wie wir auch in unserer Videoanleitung für TYPO3-Redakteure zum RTE beschrieben haben, kommt es oft zu Problemen, wenn man Text zum Beispiel aus Word-Dokumenten oder von anderen Websites per Kopieren & Einfügen im RTE verwenden will. Denn hier können ungewollte Textformatierungen übernommen werden, die im schlimmsten Fall das Layout einer Seite sogar zerstören können.

Man kann aber für die Benutzer des TYPO3-Backends einen zusätzlichen Button im RTE hinzufügen, durch den man Texte ohne Formatierungen direkt einfügen kann. Außerdem kann dieser Button auch standardmäßig auf Aktiv gesetzt werden.

Die folgenden Zeilen Typoscript müssen Sie dafür in das TSconfig Feld der Root-Seite kopieren:

# add pastetoggle button to RTE toolbar
RTE.default.showButtons := addToList (pastetoggle)
RTE.default.buttons.pastetoggle.setActiveOnRteOpen = 1

Automatische Verlinkung verhindern

Um einen Code auf dem Webauftritt darzustellen, bietet sich der Tag PRE an. Leider werden im RTE eingefügte URLs, wie http:// jweiland.net automatisch in einen richtigen Link konvertiert. In diesem Fall will man dies jedoch nicht. Man kann dies generell für alle im RTE eingefügten Links folgendermaßen unterbinden:

lib.parseFunc_RTE.makelinks >

Dies ist aber nicht sinnvoll, da die automatische Verlinkung dem Redakteur doch einige Arbeit abnimmt.

Stattdessen kann man nur für diesen einen Tag PRE in dem normalerweise keine Verlinkung vorkommen sollte, die Ausgabe ohne automatische Verlinkung anpassen. Möchte man trotzdem einen Link setzen, so kann man ihn weiterhin manuell erstellen.

lib.parseFunc_RTE.externalBlocks := addToList(pre)
lib.parseFunc_RTE.externalBlocks {
 pre.stripNL=1
      pre.stdWrap.parseFunc = < lib.parseFunc
      pre.stdWrap.parseFunc.makelinks = 0
}

Attribute in der RTE Tabelle entfernen

Wenn das Layout mit css definiert wird, möchte man manchmal nicht, dass der Redakteur durch ziehen des Tabellenrandes im RTE die Größe der Tabelle per style definieren kann.

Um das zu vermeiden, muss man im PageTSconfig folgendes eingeben:

RTE.default.proc.entryHTMLparser_db.tags.table {
fixAttrib.style.unset = 1
fixAttrib.width.unset = 1
fixAttrib.height.unset = 1
}

So wird aus: 
<table class="contenttable" style="width:400px; height:240px">...

folgendes:

<table class="contenttable">...

Genauso funktioniert das auch für <tr> und <td> Tags:

RTE.default.proc.entryHTMLparser_db.tags.tr {
fixAttrib.style.unset = 1
fixAttrib.width.unset = 1
fixAttrib.height.unset = 1
}
RTE.default.proc.entryHTMLparser_db.tags.td {
fixAttrib.style.unset = 1
fixAttrib.width.unset = 1
fixAttrib.height.unset = 1
}

Breite und Höhe für Tabellenzeilen festlegen

Mit folgender Zeile im PageTSconfig wird ein weiterer Bereich "Layout" in den Zelleigenschaften einer Tabellenzelle im RTE aktiviert. Hier kann man die Maße einer Zelle in verschiedenen Einheiten angeben:

RTE.default.disableLayoutFieldsetInTableOperations = 0

RTE für zusätzliche CSS Klassen anpassen

Am Besten benutzt man den RTE (Rich Text Editor) mit den typischen Einstellungen (Default configuration settings). Dabei sind schon einige Klassen vordefiniert, die man anpassen und benutzen kann. Zusätzlich kann man weitere Klassen hinzufügen und die voreingestellten Klassen entfernen. Die default.css befindet sich in der Extension.

RTE.default {
#angepasste CSS Datei in fileadmin speichern
contentCSS = fileadmin/../default.css
}
## Klassen hinzufuegen 
RTE.default.proc.allowedClasses := addToList(error, small, arrowlink) 
RTE.default.buttons {
     blockstyle.tags.div.allowedClasses := addToList(error, small) 
     textstyle.tags.span.allowedClasses := addToList(small) 
     link.properties.class.allowedClasses := addToList(arrowlink) 
} 
## nicht benoetigte Klassen entfernen 
RTE.default.proc.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail) 
RTE.default.buttons {
     blockstyle.tags.div.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2) } 
RTE.classes := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail) 
## Klassen fuer die RTE Auswahlfelder definieren
 RTE.classes.error { 
     name = Error in Red 
     value = color: #FF0000;
           font-weight: bold; 
     background-color: #ffff00;
 } 
RTE.classes.small {
      name = Small Font
      value = font-size: 80%; 
} 
RTE.classesAnchor.arrowlink { 
      name = Link with an Arrow
      value = background: url(fileadmin/../arrow1.gif) no-repeat 100% 0%;
 }

 

Fehlerbehebung: RTE wird nicht geladen

Falls der RTE (Rich Text Editor) in der Extension rtehtmlarea nicht geladen wird, hilft es oft, wenn man im Menü unter Benutzer › Werkzeuge die Funktion Konfiguration zurücksetzen und temporäre Daten löschen ausführt.

CSS Klassen für Tabellen hinzufügen

Wenn Sie im RTE (Rich Text Editor) Tabellen erstellen, dann erhalten diese Tabellen standardmäßig die CSS-Klasse contenttable. In den Tabelleneigenschaften können Sie der Tabelle auch eine Klasse mit gelben oder grauem Hintergrund zuweisen. In diesem Fall erhält die Tabelle die CSS-Klasse csc-frame-frame1 bzw. csc-frame-frame2.

In diesem Tutorial zeigen wir Ihnen nun, wie Sie eigene CSS-Klassen einer Tabelle zuordnen können.

Sämtliche Optionen, die im RTE zur Verfügung stehen, werden mit Hilfe einer CSS-Dateien eingebunden. So kann man z.B. in eine CSS-Datei schreiben: p.myClass {border: 1px solid green;}. Das System hinter dem RTE weiß, dass es sich bei "p" um ein Blockelement handelt und fügt die Klasse myClass der Optionsliste für die Blockelemente hinzu. Auf die gleiche Art und Weise funktioniert das auch für die Tabellen.

Standardmäßig läd der RTE die Optionen aus der CSS-Datei: typo3/sysext/rtehtmlarea/res/contentcss/default.css. Um nun eigene Werte hinzuzufügen, sollte diese Datei nach fileadmin/ kopiert werden.

Nun kann die Datei bearbeitet werden. Fügen Sie nun irgendwo in dieser Datei die neue Klasse hinzu:

table.newclass {border: 1px solid green;}

Die hier angegebenen CSS-Angaben wirken sich nicht auf das Frontend aus. Diese Angaben stylen nur das Ergebnis innerhalb des RTEs selbst.

Nach dem die Datei gespeichert wurde müssen noch ein paar Änderungen in die pageTSconfig geschrieben werden.

PageTSconfig:

# Laden unserer kopierten und überarbeiteten RTE-default CSS-Datei
RTE.default.contentCSS = fileadmin/default.css
# Der RTE darf die Klasse "newclass" einer Tabelle zuordnen
RTE.default.buttons.blockstyle.tags.table.allowedClasses := addToList(newclass)
# Die Klasse "newclass" darf beim Speichern beibehalten werden
RTE.default.proc.allowedClasses := addToList(newclass)
# Nur wenn Sie auch die Option innerhalb der Auswahlliste stylen wollen:
RTE.classes.newclass {
    name = This is my new class with a green border
    value = border: 3px solid green;
}

Bei der Ausgabe im Frontend muss unsere neue CSS-Klasse auch noch erlaubt werden. Denn nur CSS-Klassen, die sich in dieser Liste befinden, werden auch in das Frontend übertragen.

TypoScript Setup:

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list := addToList(newclass)

Nach diesen Schritten kann der Tabelle die neue CSS-Klasse zugewiesen werden. Diese neue Klasse kann nun mit Hilfe einer CSS-Datei, die Sie für das Frontend erstellt haben, gestyled werden.

CSS Klassen für gestreifte Tabellen konfigurieren

Sollen Tabellenzeilen im RTE abwechselnde Zeilenfarben haben, so ist die Formatierung möglich, wenn man für gerade und ungerade Zeilen unterschiedliche CSS Klasse erzeugen kann. Dies ist mit folgenden Einstellungen möglich:

PageTSconfig:

RTE.default.contentCSS = fileadmin/rte.css
RTE.classes.stripedtable {
    name = Striped Table
    alternating.rows {
        # 0 = even, 1 = odd
        startAt = 1
        oddClass = row-odd
        evenClass = row-even
        oddHeaderClass = row-odd
        evenHeaderClass = row-even
    }
}
RTE.mutuallyExclusiveClasses = row-odd,row-even

RTE.default.buttons.blockstyle.tags {
    table.allowedClasses := addToList (stripedtable)
    tr.allowedClasses := addToList (row-odd, row-even)
}
RTE.default.proc.allowedClasses := addToList (row-even,row-odd,stripedtable)

Im rte.css sind die Definitionen für die Klassen im RTE abgelegt. Für das Frontend müssen Klassen in den entsprechenen CSS Dateien definiert werden.

Setup:

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = contenttable, stripedtable

Vordefinierte Textfarben für Redakteure freischalten

Man kann im RTE bestimmte Textfarben zur Verfügung stellen, unter denen es dann auswählen kann. Die eine Möglichkeit ist über den Button Textfarbe eine Auswahl anzubieten:

##Button Textfarbe einblenden
RTE.default.showButtons := addToList (textcolor)

##Farbpicker ausblenden
RTE.default.disableColorPicker = 1

RTE.default.colors = color1, color2, color3
RTE.colors {
   color1 {
      name = darkblue
      value = #100959
   }
    color2 {
       name = green
       value = #19730C
   }
   color3 {
       name = terra
       value = #B24716
   }
}

Kennt der Redakteur allerdings einen Hexadezimalwert für eine Farbe, so kann er diese Farbe trotzdem verwenden.

Zweite Möglichkeit: dem Redakteur Farbklassen zur Verfügung stellen

##Globale Klassen aktivieren
RTE.default.buttons.textstyle.showTagFreeClasses = 1

RTE.default.contentCSS = fileadmin/.../rte.css
RTE.default.proc.allowedClasses := addToList(darkblue,green,terra)
RTE.default.buttons.textstyle.tags.span.allowedClasses := addToList(darkblue,green,terra)

RTE.classes.darkblue {
             name = Dunkelblau
             value = color: #100959;
        }
RTE.classes.green {
             name = Gruen
             value = color: #19730C;
        }
RTE.classes.terra{
             name = Terra
             value = color: #B24716;
        }


Im rte.css und in der CSS Datei für die Ausgabe müssen die Klassen noch definiert werden.

.darkblue { color: #100959;}
.green { color: #19730C;}
.terra{ color: #B24716;}
Aktualisiert: 17.07.2024