RTE-Liste (UL) mit CSS-Klasse ausgeben

HTML-Listen werden häufig für verschiedene Aufgaben eingesezt (Navigation, Auflistungen im Inhalt, Bildergruppen ...). Dabei beeinflussen sich die CSS-Regeln für die Listendarstellung gegenseitig wenn sie nicht durch "class", "id" oder durch ihre Verschachtelung im HTML-Code eindeutig zugeordnet werden können. Weil nun eine im TYPO3-RTE eingegebene Liste keine eigene Klasse mitbringt, hier eine kleine Anleitung wie das erreicht werden kann.

Eine Default-Klasse für UL-Listen aus dem RTE

Das Klassen-Attribut wird über die Parser-Regeln für RTE-Inhalte im TypoScript Setup eingebaut. Im Beispiel-TypoScript wird für das Attribut "class" der Default-Wert "contentList" eingesetzt. Falls die Liste aus dem RTE schon ein Klassen-Attribut mitbringt, bleibt dieses unverändert.

TypoScript Setup

### Set default class for ul from rte
lib.parseFunc_RTE {
  externalBlocks := addToList(ul)
  externalBlocks {
    ul.stripNL = 1
    ul.callRecursive = 1
    ul.callRecursive.tagStdWrap.HTMLparser = 1
    ul.callRecursive.tagStdWrap.HTMLparser.tags.ul {
      fixAttrib.class.default = contentList
    }
  }
}

Listen-Stil im RTE auswählen

Neben der Möglichkeit eine Default-Klasse für Listen aus dem RTE zu vergeben, kann einer Liste im RTE vom Redakteur auch ein individueller Stil zugewiesen werden. Hierzu wird die Liste markiert und im Auswahlfeld "Blockstil" einer der für Listen zur Verfügung gestellten Stile ausgewählt.

Beispiel-Liste 2

• Punkt 1
• Punkt 2
  • Punkt 2.1
  • Punkt 2.2

• Punkt 3

Listenstil im RTE unter "Blockstil" angelegt und ausgewählt.

Beispiel-Liste 3

• Punkt 1
  • Punkt 1.1
  • Punkt 1.2
  • Punkt 1.3

• Punkt 2
  • Punkt 2.1
  • Punkt 2.2

• Punkt 3
  • Punkt 3.1
  • Punkt 3.2
  • Punkt 3.3

Listenstil im RTE ausgewählt, ausklappbar mit jQuery.

Page TSConfig

### RTE configuration

# Add classes to drop downs (basic configuration)
RTE.classes {
  specialList {
    name = Spezielle Liste
    value = color:#FF6600;
  }
  specialList2 {
    name = Spezielle Liste 2
    value = color:#FF66FF;
  }
}

RTE.default {
  # CSS-file with definitions for used classes
  contentCSS = fileadmin/templates/css/rte.css

  # Allow classes for FE
  proc.allowedClasses := addToList(specialList,specialList2)
}

Mit dem vorstehenden Eintrag im Page TSConfig können eigene Blockstile angelegt werden. Im Beispiel "Spezielle Liste" mit der Klasse "specialList" und "Spezielle Liste 2" mit der Klasse "specialList2".

Unter "RTE.classes" werden alle Klassen, die in den Auswahlfeldern des RTE zur Verfügung stehen sollen, definiert. Mit den Werten für "name" und "value" wird die Anzeige in den Drop-Down-Boxen für Text-Stil und Blockstil festgelegt.

"RTE.default.contentCSS" bindet eine CSS-Datei für den RTE ein. Die Original-CSS-Datei finden Sie unter "typo3/sysext/rtehtmlarea/res/contentcss/default.css". Von hier kann sie kopiert und an die eigene RTE-Konfiguration angepasst werden. In die CSS-Datei werden die Selektoren, also die Klasse und der HTML-Tag für den sie angewendet werden soll, und die CSS-Regeln für die Darstellung der Listen, im RTE-Textfeld eingetragen, z.B.:

ul.specialList { color: #FF6600; }
ul.specialList2 { color: #FF66FF; }

Mit "RTE.default.proc.allowedClasses" werden die Klassen für die Ausgabe im Frontend zugelassen.

Gegebenenfalls ist es notwendig, den Browser-Cache(!) zu leeren, damit die neue Konfiguration funktioniert.

Damit die neuen Stile im Drop-Down "Blockstile" erscheinen muss die gesamte Liste, der ein Stil zugewiesen werden soll, ausgewählt werden.