Immer wenn ich Formatierungs-Einstellungen am RTE (htmlArea) von Typo3 vornehmen will, habe ich vergessen, was dazu nötig ist und muß mir die entsprechende Doku wieder zusammensuchen. Daher habe ich hier die wichtigsten Infos zusammengefaßt:

Das aktuelle Handbuch zur RTE-Konfiguration ist zu finden unter
typo3.org -> Documentation -> Document Library -> Extension Manuals -> htmlArea RTE Manual
bzw. http://typo3.org/documentation/document-library/extension-manuals/rtehtmlarea_manual/1.7.4/view/
Es ist auch in der Extension enthalten (Download im Extension-Manager).

 

Die drei bzw. vier Dropdown-Listen beziehen sich auf folgende Elemente:

Englische Bezeichnung	Deutsche Bezeichnung	Bezeichnung im Handbuch	Zuständige Extension-Extension	Key in showButtons-Liste	Wirkung
Block style	Blockstil	–	BlockStyle	blockstyle	Legt die Klasse des aktuellen Block-Elements fest, meist div, aber auch z.B. ul oder img
Text style	Textstil	Text styling	TextStyle	textstyle	Legt die Klasse des aktuellen Inline-Elements fest (und schafft ggfs. ein neues span)
Block format	Blockformat	–	BlockElements	formatblock	Auswahl von Block-Tags (p, h1, …)
Inline format	Textformat	Text formating	InlineElements	formattext	Auswahl von Inline-Tags (code, strong, …)

 

Block style

Zum Anlegen einer neuen Klasse für Blockelemente sind folgende Schritte nötig:

• Anlegen der Klasse im Stylesheet des RTE, entweder
  – durch Hinzufügen zu der mit RTE.default.contentCSS festgelegten Datei, oder
  – durch Festlegen als RTE.default.inlineStyle.beliebiger-key (dabei darf RTE.default.ignoreMainStyleOverride nicht gesetzt sein).
• Festlegen der Darstellung in der Auswahlliste durch
  RTE.classes.name-der-klasse.name = Name in der Auswahlliste
  und
  RTE.classes.name-der-klasse.value = CSS-Style des Auswahllistenpunktes
• Optional: Zulassen der Klasse in RTE.default.buttons.blockstyle.tags.name-des-tags.allowedClasses
  Dieser Schritt ist optional, sind für einen Tag keine erlaubten Klassen festgelegt, dann sind alle wie oben beschrieben definierten Klassen erlaubt.
  Für die Tags div, table und td kann dies auch in der abgekürzten Form RTE.default.classesParagraph, …classesTable und …classesTD definiert werden.
• Selbstverständlich muß die entsprechende Definition noch im Frontend-CSS ausgestaltet werden.

Text style

Zum Anlegen einer neuer Inline-Formatierung sind folgende Schritte nötig:

• Genau wie oben: Anlegen der Klasse im Stylesheet des RTE, entweder
  – durch Hinzufügen zu der mit RTE.default.contentCSS festgelegten Datei, oder
  – durch Festlegen als RTE.default.inlineStyle.beliebiger-key (dabei darf RTE.default.ignoreMainStyleOverride nicht gesetzt sein).
• Genau wie oben: Festlegen der Darstellung in der Auswahlliste durch
  RTE.classes.name-der-klasse.name = Name in der Auswahlliste
  und
  RTE.classes.name-der-klasse.value = CSS-Style des Auswahllistenpunktes
• Optional: Zulassen der Klasse in RTE.default.buttons.textstyle.tags.name-des-tags.allowedClasses
  Dieser Schritt ist optional, sind für einen Tag keine erlaubten Klassen festgelegt, dann sind alle wie oben beschrieben definierten Klassen erlaubt.
• Selbstverständlich muß die entsprechende Definition noch im Frontend-CSS ausgestaltet werden.

Block format

Um ein bestimmtes Block-Element zuzulassen sind folgende Schritte nötig:

• Standardmäßig (im Modus “Typical”) sind alle unterstützten Blockelemente bis auf address und pre aktiviert
• Aktivierung des Tags in der Auswahlliste durch
  Nichtnennung in RTE.default.buttons.formatblock.removeItems
  und ggfs.
  Nennung in RTE.default.buttons.formatblock.orderItems

Inline format

Um ein bestimmtes Inline-Element zuzulassen sind folgende Schritte nötig:

• Aktivierung der Option enableInlineElements in der Konfiguration der Extension (Extensionmanager)
• Aktivierung des Tags in der Auswahlliste durch
  Nichtnennung in RTE.default.buttons.formattext.removeItems
  und ggfs.
  Nennung in RTE.default.buttons.formattext.orderItems
• Ggfs. Anzeige von Liste oder Buttons durch Hinzufügen zu RTE.default.showButtons, da die Dropdown-Liste standardmäßig nicht aktiviert ist:
  – formattext für die Dropdown-Liste mit allen aktivierten Inline-Formatierungen
  – der Name des Buttons für einen eigenen Knopf für die jeweilige Formatierung

Anmerkungen:

• Als RTE Interface Configuration Object habe ich in den Beispielen RTE.default verwendet, sie sind aber natürlich auch auf jedes andere Configuration Object anwendbar.
• Die Default-Konfigurationen stammen aus den Dateien EXT:rtehtmlarea/res/typical/pageTSConfig.txt (dies ist beim Installieren der Extension auswählbar) und EXT:rtehtmlarea/res/contentcss/default.css. Letztere wird deaktiviert, wenn man RTE.default.contentCSS festlegt.
• Pfadangaben in inlineStyle-Definitionen sind relativ zu typo3temp/rtehtmlarea/, Pfadangaben in RTE.classes.name-der-klasse.value-Stilen sind relativ zu typo3/.
• Unbekannte Klassen werden in meiner Testinstallation bei der Transformation noch nicht entfernt. Warum dies so ist, habe ich noch nicht herausbekommen.