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.