Typo3 - Rich Text Editor (RTE)

Snippets

TYPO3 6.2 Config

Deprecated property			Use instead
disableRightClick			contextMenu.disable
disableContextMenu			contextMenu.disable
hidePStyleItems				buttons.formatblock.removeItems
hideFontFaces				buttons.fontstyle.removeItems
fontFace				buttons.fontstyle.addItems
hideFontSizes				buttons.fontsize.removeItems
classesCharacter			buttons.textstyle.tags.span.allowedClasses
classesParagraph			buttons.blockstyle.tags.div.allowedClasses
classesTable				buttons.blockstyle.tags.table.allowedClasses
classesTD				buttons.blockstyle.tags.td.allowedClasses
classesImage				buttons.image.properties.class.allowedClasses
classesLinks				buttons.link.properties.class.allowedClasses
blindImageOptions			buttons.image.options.removeItems
blindLinkOptions			buttons.link.options.removeItems
defaultLinkTarget			buttons.link.properties.target.default
fontSize				buttons.fontsize.addItems
RTE.default.classesAnchor		RTE.default.buttons.link.properties.class.allowedClasses
RTE.default.classesAnchor.default.[link-type]	RTE.default.buttons.link.[link-type].properties.class.default
mainStyleOverride			contentCSS
mainStyleOverride_add.[key]		contentCSS
mainStyle_font				contentCSS
mainStyle_size				contentCSS
mainStyle_color				contentCSS
mainStyle_bgcolor			contentCSS
inlineStyle.[any-keystring]		contentCSS
ignoreMainStyleOverride			n.a.
disableTYPO3Browsers			buttons.image.TYPO3Browser.disabled and buttons.link.TYPO3Browser.disabled
showTagFreeClasses			buttons.blockstyle.showTagFreeClasses and buttons.textstyle.showTagFreeClasses
disablePCexamples			buttons.blockstyle.disableStyleOnOptionLabel and buttons.textstyle.disableStyleOnOptionLabel

CSS für RTE und einige Eigenschaften

TS Config

RTE.default {

    contentCSS = fileadmin/template/rte.css

    ## Markup options (htmlArea RTE only)
    enableWordClean = 1
    removeTrailingBR = 1
    removeComments = 1
    removeTags = center, o:p, sdfield
    removeTagsAndContents = style,script
    roteSchrift {
        name = Rote Schrift
        value = color: #8A0020;
    }
    graueSchrift {
        name = Graue Schrift
        value = color: #C0C0C0;
    }
    grueneSchrift {
        name = Grüne Schrift
        value = color: #5e912b;
    }

    proc.allowedClasses (
        external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
        align-left, align-center, align-right, align-justify,
        csc-frame-frame1, csc-frame-frame2,
        component-items, action-items,
        component-items-ordered, action-items-ordered,
        roteSchrift, graueSchrift, grueneSchrift
        indent
    )

classesCharacter = roteSchrift, graueSchrift, grueneSchrift

Weiterführendes

Das sieht sehr gut aus -> sehr umfassend und ausführlich erklärt (Datum des Zugriffs 26.1.2010)

http://www.site42.de/Wie-konfiguriert-man-den-RTE-h.58.0.html

RTE-Konfiguration als Extension laden

Todo. Vgl. die Extension Rich Text Editor pre-configuration die bei den Examples steht.

RTE einrichten

Hinweis:

Ab Version 4 ist der Editor HTMLArea eingesetzt, den es für frühere Versionen als Extension gibt. Für Typo3 Versionen unter 4 muß die HTMLArea Extension in einer Version kleiner 1.3 installiert werden sonst gibt's eine Fehlermeldung beim Verlinken.

Das Aussehten des RTE, die verfügbaren Optionen und die HTML-Ausgabe läßt sich einstellen. Über das PageTS Config Feld der Seiten kann man z.B. einzelne Funktionen des RTE für den Seitenbaum abstellen.

Alternativer RTE

Als alternative bietet sich TinyMCE an. Er ist schlanker als htmlarea und läßt sich meist leichter einstellen. Allerdings bietet er nicht soviele Konfigurationsmöglichkeiten (Stand 2010)

RTE Standard CSS Stylesheet anpassen

Eigenes Stylesheet einbinden

Eine eigene Datei funktioniert für die Innerhalb des Texteditors. Um die Styles in den Dropdown-Feldern anzupassen muß man aber TypoScript anwenden (s.u.).

RTE.default {
   contentCSS = fileadmin/rte_css/css_htmlarea.css
   useCSS = 1
}

Anpassen der Klassen über TypoScript

Beispiel:

#Klassen hinzufügen
RTE.default.proc.allowedClasses := addToList(error,more-link, info-block, block)
RTE.default.classesParagraph := addToList(error,info-block)
RTE.default.classesCharacter := addToList(block)
RTE.default.classesAnchor := addToList(more-link)

#nicht benoetigte Klassen entfernen
RTE.default.classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
RTE.default.proc.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)
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.classesAnchor.more-link {
   name = Link with an Arrow
   value = background: transparent url(../img/arrow.png)no-repeat 0 0; padding:0 0 0 14px;
}
RTE.classesAnchor.info-block {
   name = Infoblock with grey background
   value = background-color: #ececec;
}

#NEUE CSS KLASSEN HINZUFUEGEN IM RTE
#**********************************************
RTE {
   default {
      contentCSS = fileadmin/templates/vdi-templates/css/rte.css
      showTagFreeClasses = 1
   }
}

RTE HTML-Ausgabe

Der RTE formatiert verändert den HTML Code auf verschiedene Weise. Wie er das macht läßt sich beeinflussen. Hier einige nützliche Beispiele:

Restriktive RTE-Konfiguration

1.Schritt: Nur die Inhaltselemente Text und Text mit Bild sollen mit dem RTE bearbeitet werden.

Im PageTS-Config Feld:

RTE.default.disabled=1
RTE.config.tt_content.bodytext.types{
   text.disabled = 0
   textpic.disabled = 0
}

2. Schritt: Nur noch die Standardformatierung und zwei Spezial formatierungen zur Auswahl lassen:
<pre>
RTE.classes{
   highlight{
      name = Highlight
      value = font:bold; color: red;
   }
   zitat{
      name = Zitat
      value=font:italic 15px; margin-left:20px;
   }
}
RTE.default.classesCharacter = highlight, zitat

3.Schritt: Üver das User TSConfig kann man nun einstellen welche Menüoptionen dem User angezeigt werden.

   options.RTEkeyList = class, bold, italic, link

htmlArea

Mit der Extension htmlarea steht auch für Mozilla basierte Browser ein Editor zur Verfügung der auf dem bekannten HTMLArea basiert.

Viele der RTE Optionen funktionieren auch in htmlarea, darüber hinaus auch noch einige weitere.

Konfigurationsbeispiele htmlarea

Kommentiertes Beispiel

Quelle: http://www.typo3-lisardo.de/home/blog-post/2010/09/02/rte-htmlarea-einrichten.html

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
  }
}

Beispielkonfiguration für PageTS mit verschiedenen Möglichkeiten

###########
### RTE ###
###########
# Klassendefinitionen löschen und neue Klassendefinitionen zulassen
RTE.config.tt_content.bodytext.proc.allowedClasses >

# CSS für die Anzeige im Editor selbst #
RTE.default.contentCSS = fileadmin/templates/css/rte.css

# Sichtbare Buttons #

RTE.default{
   # diverse Einstellungen
   keepButtonGroupTogether = 1
   # Buttons (mit Tabelle)
   #showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock,left, right, center, bold, italic, subscript, superscript, orderedlist, unorderedlist, outdent, indent, insertcharacter, link, acronym, chMode, removeformat,table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
   # Buttons (ohne Tabellen)
   showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock, bold, italic, subscript, superscript, orderedlist, unorderedlist, outdent, indent, insertcharacter, link, chMode, removeformat
   #hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste     
   
   proc{
      # zusätzliche ERLAUBTE TAGS
      #allowTags := addToList(blockquote,center,align)
      #allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2) 
      #allowedClasses := addToList(rahmen-blau)
      allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center
      denyTags = font
      HTMLparser_rte.tags.align.protect =1
      keepPDIVattribs = align,class,style,id
   }
   # weitere Klassen hinzufügen / verändern
   #classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
   #classesParagraph := addToList(rahmen-blau)
}


# Definition der Klassen für die Anzeige im Editor
#RTE.classes { 
#   csc-frame-frame1 {
#      name = blauer Rahmen
#      value = font-family:Verdana,Arial,Helvetica,sans-serif;background: #ebeef5;border: 1px dotted #113388;
#   }
#   csc-frame-frame2 {
#      name = gelber Rahmen
#      value = font-family:Verdana,Arial,Helvetica,sans-serif;background: #fcf4e9;border: 1px dotted #f3ae00;
#   }
#} 

Noch ein kleines Beispiel

(Aus seo-24.at)

TCEFORM.tt_content.bodytext.RTEfullScreenWidth = 650

RTE.default {
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = center, sdfield
removeTagsAndContents = style,script

# Buttons die gezeigt/versteckt werden
showButtons = bold, italic, underline, left, center, right, orderedlist, unorderedlist, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, textcolor, bgcolor
hideButtons = textstyletextstylelabel, blockstyle, blockstylelabel, fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste, showhelp, about, insertcharacter, line

# Hält die RTE Icons gegroupt zusammen
keepButtonGroupTogether = 1

# blendet Statusbar in htmlarea aus
showStatusBar = 0

}

Eigene Tags verwenden

RTE.default.proc.allowTags = list-of-allowed-tags
RTE.default.proc.HTMLparser_rte.tags.mycustomtag.protect =1

where list-of-allowed-tags is the list of all allowed tags, including your custom tag, and mycustomtag is the name of your tag.

Klasse für Tabellen ändern

«Typo3 always replaces the class I selected in the RTE for a table with the class "contenttable". Do you have an idea how to switch that off?» Assuming that you have installed extension CSS Styled Content (css_styled_content), add the following line in your TS template Setup field:

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list >

The contenttable class will then be added only if no class is specified for the table.

diverses

eigene Klassen

RTE {
    classes {
        Infobox {
            name = Infobox
            value = eigenschaften
        }
    }

    default {
        classesParagraph = Infobox
        contentCSS = fileadmin/templates/version1/css/style.css
        classesCharacter = Infobox
        proc.allowedClasses (
            Infobox, ...
        )
    }
}

Probleme und Lösungen

RTE speichert keine Attribute

Symptome: Wenn man im RTE target _blank angibt wird dieses nicht gespeichert und taucht nicht im HTML Code auf.

Abhilfe: Die Attribute müssen erlaubt sein. Dies kann man z.B. im PageTS einstellen:

entryHTMLparser_db {
  tags {   
    a.allowedAttribs = id, title, dir, lang, xml:lang, class, href, rel, hreflang, target, nofollow
  }
}

JavaScript Bug mit htmlarea und Firefox 2.0.0.3

Der Editor lädt nicht in der oben genannten Version von Firefox. Das liegt an einem Filter von htmlarea der dafür sorgen soll das die richtigen Routinen verwendet werden. Dieser erkennt die 0.0.3 Signatur falsch (den User Agent String). Der neue String heißt:

Mozilla/5.0 (Windows; U; Windows NT 5.0; de; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

das 1.3 verwechselt htmlarea mit dem IE für Mac

Workaround: eine schnelle Lösung ist den Firefox mit einer anderen Signatur auszustatten: Sie können den User Agent String in Firefox direkt ändern. Rufen Sie dazu in der Adresszeile auf:

about:config

Im Anzeigebereich erscheinen die Firefox-Einstellungen. Klicken Sie hier auf die rechte Maustaste um das Kontextmenü zu öffnen und wählen Sie neu - String aus.

Als Einstellungsname tragen Sie:

general.useragent.override

ein. Als Wert tragen Sie beispielsweise ein (am Besten copy&paste):

Mozilla/5.0 (Windows; U; Windows NT 5.0; de; rv:1.8.1.2pre) Gecko/20070111 Firefox/2.0.0.2

Diese Einstellungen sind sofort wirksam (kein Neustart erforderlich). Falls Sie in Typo3 angemeldet waren, müssen Sie sich erneut anmelden.

Um diesen User Agent Sting zu verwenden, wählen Sie ihn bitte aus dem Menü aus:

Extras - User Agent Switcher - Firefox 2.0.0.2

Löschen Sie noch bitte den Cache von Firefox:

Extras - Einstellungen - Erweitert - Netzwerk - Cache - Jetzt löschen

Nun sollte der RTE in Typo3 wieder funktionieren.

htmlarea - Eigene Tags verwenden

In der Standard - Einstellung werden eigene Tags verworfen. So kann man das verhindern:

### Allow Custom Tags ###
RTE.default.proc.allowTags = list-of-allowed-tags
RTE.default.proc.HTMLparser_rte.tags.mycustomtag.protect =1

Wobei list-of-allowed-tags eine Kommaseparierte Liste der erlaubten Tags enthält und mycustomtag den betreffenden neuen Tag schützt.

htmlarea - Bilder lassen sich nicht speichern

Das "Problem" liegt darin dass htmlarea standardmässig so konfiguriert ist:

## REMOVE IMG TAGS
entryHTMLparser_db.tags.img.allowedAttribs = 0
entryHTMLparser_db.tags.img.rmTagIfNoAttrib = 1

Damit werden beim Speichern in typo3 also zuerst alle Attribute aus dem Image-Tag entfernt und schließlich der gesamte Tag auch noch, weil er ja kein Attribut mehr enthält.

Ohne Häcken im Extension-Manager tut es also auch

## SAVE IMG TAGS
entryHTMLparser_db.tags.img.allowedAttribs = alt,class,style,src,title
entryHTMLparser_db.tags.img.rmTagIfNoAttrib = 1

Vor allem das Attribut src ist wichtig ;-)

htmlarea - Fehlermeldung wenn Bilder im Frontend angezeigt werden sollen

Bei Versionen unter Typo3 4.0 eine niedrigere Version von htmlarea verwenden (1.1.3 oder evt. 1.1.6)

Hide Buttons - Show Buttons

showButtons hideButtons list of id-strings Note: In the case of htmlArea RTE, available buttons are: blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock, bold, italic, 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

Note: In the case of htmlArea RTE, if extension sr_static_info is not installed, the spellcheck button is not enabled.

Note:In the case of htmlArea RTE, the following elements will always be shown: undo redo, about.

Note: In the case of htmlArea RTE, buttons user and acronym are never available in the front end.

Note: In the case of htmlArea RTE, button Acronym is not currently available in IE.