Rich Text Editor HTMLArea

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
}

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 
}

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.

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.

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

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.