Typo3-RTE konfigurieren

andre 19. Dezember 2008

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.

Kommentarfunktion ist deaktiviert.

Trackback URI |