login

Eines der nützlichsten Features des htmlArea RTE (rtehtmlarea) ist die Möglichkeit, im Editierfenster dynamisches CSS zu verwenden. Dynamisches CSS ist das Bereitstellen in einer CSS-Datei definierter Klassen in Anhängigkeit davon, in welchem html-Kontext sich der Cursor im Editiermodus befindet.

Die folgenden Erläuterungen setzen voraus, dass bei der Installation der Extension rtehtmlarea die Option "Enable all editor options" ausgewählt worden ist. Ist dies nicht der Fall, müssen im Typoscript, das den RTE konfiguriert, die Dropdown-Boxen "Absatz" (engl. "Paragraph") und "Text" aktiviert werden, sinnvollerweise mit den zugehörigen Labels, sowie die Dropdown-Box "Absatzart" (engl. "Type of paragraph"). Sucht bei "Absatzart" nicht nach einem Label, das Ding hat keins. Wenn Ihr es erfolgreich aktiviert habt, steht Euch eine Dropdown-Box mit "Normal", "Überschrift x" und "Vorformatiert ("Heading x", "Preformatted") zur Verfügung.
Diese Dropdown-Box dient dazu, dem im RTE eingegebenen Text das Absatz-tag p (Normal), eine der Überschriften-tags h1 bis h6 oder das tag pre für vorformatierten Text zuzuweisen.

TS bei "Enable all editor options" off:
RTE.default.showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock

Für Aufzählungen werden zudem die Einträge "orderedlist" und "unorderedlist",
für Tabellen "table" benötigt, einfach kommasepariert an obige Zeile anhängen. Genauere Details, welche Buttons man im RTE noch ein- und ausblenden kann, können im Manual zu rtehtmlarea nachgelesen werden.

Ausserdem muss in jedem Fall das Plugin DynamicCSS installiert sein.

Um dynamisches CSS verwenden zu können, benötigen wir eine CSS-Datei, in der die zu verwendenden Klassen definiert werden. Es ist sinnvoll, eine CSS-Datei nur für die Klassen anzulegen, die im RTE verwendet werden sollen, damit die Redakteure nicht versehentlich Klassen zuweisen, die überhaupt nicht für die Inhaltselemente vorgesehen sind.

Diese CSS-Datei, z.B. rte.css, muss zum Einen so eingebunden werden, dass sie im Kopf der gerenderten Webseite erscheint, sonst wirken sich die CSS-Einstellungen im Fontend nicht aus. Wie Du das machst, hängt allein davon ab, wie Du Deine sonstigen CSS-Dateien einbindest. Zum Anderen muss die rte.css im Editor eingebunden werden, damit die Styles in den Dropdown-Boxen angezeigt werden:

RTE.default.contentCSS = fileadmin/templates/css/rte.css

Dann muss dem RTE mitgeteilt werden, dass er CSS verwenden soll:

RTE.default.useCSS = 1

Die Dropdown-Box "Absatz" ist für alle Klassen vorgesehen, die für Block-Elemente wie z.B. h1 bis h6, p, ul, table etc. sowie deren jeweils zugehörige, ebenfalls blockbildenden Kindelemente li, tr, td, tbody etc. verwendet werden können. Um dem Redakteur für Absätze jeweils nur die Absatzformate, für Listen nur die Listenformate, für Tabellen nur die Tabellenformate und für Überschriften nur die Überschriftformate anzuzeigen, werden die Klassen in der rte.css auf das jeweils vorgesehene html tag beschränkt:

p.grosseSchrift
wird nur angezeigt, wenn der Cursor sich innerhalb eines Absatz-Bereichs befindet.
li.roterPunkt
wird nur angezeigt, wenn sich der Cursor innerhalb eines Listenpunktes befindet.
h4.gruenGross
wird nur angezeigt, wenn sich der Cursor innerhalb einer h4-Überschrift befindet.

Alle für das jeweilige html-Element nicht vorgesehenen Klassen werden nicht angezeigt.
Um bei Listen und Tabellen die Klassen für das Elternelement ul bzw. table angezeigt zu bekommen, muss die gesamte Liste bzw. Tabelle mit dem Cursor markiert werden.

Es ist auch möglich, Klassen zu definieren, die unterschiedlichen Blockelementen gleichermassen zugewiesen können:

.roteSchrift
kann sowohl einem Absatz, einer Liste, einer Tabelle wie einer Überschrift zugeordnet werden. Um solche nicht tag-gebundenen Klassen verwenden zu können, muss im RTE TS dies eingetragen werden:

RTE.default.showTagFreeClasses = 1

Kurz zwischendurch zusammengefasst: Über "Absatzart" bestimme ich, ob ich Absatz, Überschrift X oder Vorformatiert haben möchte und weise dem Text das passende html tag zu, über "Absatz" weise ich anschliessend tag-abhängig eine Klasse aus der rte.css zu (oder ggf. eine freie Klasse).

Über die Absatzformate hinaus kann mit der Dropdown-Box "Text" einem Teilbereich innerhalb eines Absatzes, eines Listenpunktes, einer Überschrift eine Klasse zugewiesen werden, die per span um den Textteil gewrappt wird, der mit dem Cursor markiert wurde.

Die betreffenden Klassen müssen in der rte.css als
span.roteSchrift
span.sehrGross
angelegt werden.

Damit span-Klassen in der Dropdown-Box angezeigt werden, muss im RTE TS folgender Eintrag vorgenommen werden:

RTE.default.classesCharacter = roteSchrift, sehrGross

Und damit die span-Klassen auch in der Webseitendarstellung erhalten bleiben ist dieser Eintrag erforderlich:

RTE.config.tt_content.bodytext.proc.allowedClasses = roteSchrift, sehrGross

Auch Links kann man im RTE Klassen zuweisen, was z.B. die Möglichkeit eröffnet, externe von den internen Links durch unterschiedliche Klassen optisch zu unterscheiden.

Dazu werden in der rte.css Klassen als
a.intern
a.extern
a.mailto
angelegt und im RTE TS dieser Eintrag gesetzt:

RTE.default.classesAnchor = intern, extern, mailto

Legt man einen Link an, erscheint in dem Link-Konfigurationsfenster in der Dropdown-Box "Style" die obige Auswahl.

Schliesslich kann man Bildern, die im RTE eingefügt werden, auf gleichem Weg Klassen zuweisen. In der rte.css Klassen als
img.blauerRand
img.10pxAbstand
anlegen, im RTE TS
RTE.default.classesImage = blauerRand, 10pxAbstand
setzen, und bei den Bildeigenschaften können in der Dropdown-Box "Style" die entsprechenden Klassen ausgewählt werden.

Wenn in der rte.css neue Klassen angelegt werden, zeigen sowohl IE wir Firefox die nicht in der laufenden Session im RTE an. Beim IE reicht es meistens, sich aus- und neu einzuloggen, Firefox ist versionsunabhängig noch zickiger, der will ganz beendet und neu gestartet werden.

Wenn Ihr in der Website überall dieselbe Schriftfamilie verwendet und die in Eurem Haupt-CSS festgelegt habt, wird die nicht im RTE angezeigt. Der RTE kennt nur das, was in "seinem" CSS steht. Damit man im RTE schon das Look-and-Feel des endgültigen Textes bekommt, muss der Eintrag dort also auch nochmal vorgenommen werden.

RTE.default.contentCSS = fileadmin/templatescss/rte.css
RTE.default.useCSS = 1
RTE.default.enableWordClean = 1
RTE.default.disableEnterParagraphs = 0
#fontstyle, fontsize werden ins html geschrieben, deshalb rausgenommen
#lefttoright, righttoleft nicht benötigt
#inserttag rausgenommen, damit redakteure damit keinen unsinn treiben
RTE.default.hideButtons = fontstyle, fontsize, lefttoright, righttoleft, inserttag
#PRE nicht benötigt, deshalb rausgenommen
#H1 aus semantischen Gründen rausgenommen (Überschrift Inhaltselemente ist schon h1)
RTE.default.hidePStyleItems = PRE, H1
#Für sauberes html rausgenommen
RTE.default.hideTags = font, font (full)
# siehe oben ausführlich
RTE.default.showTagFreeClasses = 1
RTE.default.classesCharacter = roteSchrift, sehrGross
RTE.default.classesImage = blauerRand, 10pxAbstand
RTE.default.classesAnchor = intern, extern, mailto
RTE.config.tt_content.bodytext.proc.allowedClasses = roteSchrift, sehrGross
RTE.default.showStatusBar = 1
RTE.default.proc {
    // TRANSFORMATION METHOD
    overruleMode = ts_css
    // LINES CONVERSION
    dontConvBRtoParagraph = 1
    // TAGS ALLOWED OUTSIDE P & DIV
    allowTagsOutside = img,hr
    // TAGS ALLOWED
    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
    // TAGS DENIED
    denyTags = font
    // ALLOWED P & DIV ATTRIBUTES
    keepPDIVattribs = align,class,style
    // CONTENT TO RTE
    HTMLparser_rte {
        // TAGS ALLOWED
        allowTags < RTE.default.proc.allowTags
        removeTags = font
        // DO NOT REMOVE UNMATCHED TAGS
        keepNonMatchedTags = 0
    }
    // CONTENT TO DATABASE
       entryHTMLparser_db = 1
       entryHTMLparser_db {
        // XHTML COMPLIANCE
        xhtml_cleaning = 1
        // CLEAN TAGS
        noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
        tags.hr.allowedAttribs = class
        // REMAP B AND I TAGS
        tags.b.remap = strong
        tags.i.remap = em
        rmTagIfNoAttrib = span,div,font
        htmlSpecialChars = 1
   }
}
RTE.default.disableColorPicker = 1
RTE.default.disableSelectColor = 0
#vordefinierte farben, damit redakteure sich innerhalb des styleguides austoben können
RTE.colors {
   color1 {
      name = dunkelblau
      value = #000066
   }
    color2 {
       name = blau
       value = #00008B
   }
   color3 {
       name = rotbraun
       value = #B22222
   }
   color4 {
       name = dunkelrot
       value = #CC3300
   }
   color5 {
       name = mittelbraun
       value = #D2691E
   }
   color6 {
       name = orange
       value = #FF9933
   }
   color7 {
       name = pfirsich
       value = #FFDAB9
   }
   color8 {
       name = natur
       value = #FDF5E6
   }
}
RTE.default.colors = color1, color2, color3, color4, color5, color6, color7, color8

Autor: Carla Froitzheim