Eigene Style-Klassen einbinden

Durch die Konfiguration des RichText-Editors (RTE) kann festgelegt werden, welche Formatierungsmöglichkeiten einem Redakteur zu Verfügung stehen. Die Konfiguration kann auf folgenden Ebenen stattfinden:
  • auf der Ebene des Inhaltstyps
    Je nach Inhaltstyp kann der Editor verschiedene Formatierungsmöglichkeiten bieten. So kann z.B. für den Typ Text mit Bild die Möglichkeit,
    im RTE Bilder hinzuzufügen, deaktiviert werden.
  • auf der Ebene der Seite
    Unterschiedliche Seiten des Seitenbaums können verschiedene Varianten des RTE zugeordnet werden.
    So kann z.B. das Format des Fließtexts oder die Anzahl der Funktionen unterscheiden.
  • auf der Ebene der Zugriffsrechte
    Weiters kann dass Erscheinungsbild des RTE vom Backend-Benutzer abhängig sein (siehe Modul Benutzerverwaltung).

Als ersten Schritt zur Anpassung des RichText-Editors binden wir CSS-Klassen ein, die dem Redakteur in weiterer Folge im RTE zur Verfügung stehen.
Folgendes Beispiel zeigt, welche Anweisungen in das TSconfig-Feld eingetragen werden müssen, um eine CSS-Datei einzubinden und einige Standard-Elemente anzupassen.


Die Eigenschaft showTagFreeClasses erlaubt, dass die Style-Klassen für alle Tags verwendet werden dürfen. In contentCSS muss der Pfad zur einzubindenden CSS-Datei angegeben werden. Durch die Eigenschaft useCSS wird diese Datei tatsächlich eingebunden.
Für das RTE-Objekt wird unter der Eigenschaft classes die Bezeichnung der Style-Klassen definiert, wie sie im Auswahlmenü angezeigt werden sollen (siehe Abbildung). Um die neu definierten Klassen im Editor erscheinen zu lassen, müssen sie der Eigenschaft RTE.default.classesCharacter noch zugewiesen werden. Die beiden Style-Klassen müssen für den Einsatz im Frontend noch erlaubt werden. Dies geschieht mit der Eigenschaft RTE.default.proc.allowedClasses. Werden die Klassen hier nicht bekannt gegeben, können diese im RTE zwar ausgewählt und zugewiesen werden, aber der Editor entfernt vor einem evt. Speichern die Style-Klassen wieder aus den entsprechenden Tags.
Weiters muss die Datei aus dem Beispiel-Code fileadmin/rte.css auch explizit im Frontend eingebunden werden, da die Style-Klassen zwar im HTML-Code zugewiesen werden, aber der verwendete Browser diese zur korrekten Darstellung sonst nicht finden kann.



Die Eigenschaft hideFontSizes definiert, welche Font-Größen (es gibt 7 mögliche Größen) ausgeblendet werden sollen. Die Eigenschaft hideFontFaces funkioniert analog dazu für die verschiedenen Schriftarten, die im RTE augeblendet werden sollen. Folgende Zahlenwerte sind den verfügbaren Schriftarten zugeordnet:
1: Arial
2: Arial Black
3: Verdana
4: Times New Roman
5: Garamond
6: Lucida Handwriting
7: Courier
8: Webdings
9: Wingdings


Die Eigenschaft showButtons erlaubt festzulegen, welche Buttons im RTE angezeigt werden sollen. Analog dazu existiert die Eigenschaft hideButtons, die die Buttons definiert, die ausgeblendet werden sollen. Welche Werte welche Buttons repräsentieren, kann über den TSConfig-Assistent leicht in Erfahrung gebracht werden.
Damit die eigenen CSS-Klassen nach dem Speichern nicht durch den Filter-Prozess des RTE aus den Tags gelöscht werden, müssen diese für den entsprechenden Inhaltstyp noch erlaubt werden.
RTE.config.tt_content.bodytext.proc.allowedClasses = bold, boldColor
Dadurch bleibt die Formatierung auch nachdem Speichern des Textes und somit im entsprechenden Datenbankfeld weiterhin erhalten.



Typenbezogene Anpassungen
Die bis jetzt durchgeführten Anpassungen betrafen alle Inhalte und Inhaltstypen. Die Konfiguration des RichText-Editors kann jedoch auch von der Herkunft des Inhalts und des Typs des Inhaltselements abhängig gemacht werden.

Zuweisungen zur Eigenschaft default haben Auswirkungen auf das Erscheinen des RichText-Editors, unabhängig vom Typ des Element.
Die Eigenschaft config erlaubt die Spezifikation einer Datenbanktabelle, aus der der Inhalt stammen soll. Wird nun eine Eigenschaft verändert, so hat dies nur auf diesen Inhaltstyp Auswirkungen.

Die Anweisung

RTE.config.tt_content.bodytext.showButtons = copy,paste,cut

bewirkt, dass für normale Inhaltselemente nur die Buttons Kopieren, Einfügen und Ausschneiden zur Verfügung stehen. Für Daten, die nicht aus dem Datenfeld für Inhaltselemente stammen (d.h. nicht aus der Spalte bodytext der Tabelle tt_content), sind weiterhin alle Buttons sichbar (das ist die Standardeinstellung, wenn für die showButtons-Eigenschaft kein Wert definiert wurde). Die config-Eigenschaft kann noch um eine Stufe verfeinert werden, indem auch der Inhaltstyp angegeben wird.

RTE.config.tt_content.bodytext.types.text.showButtons = copy,paste,cut

Nun werden diese Buttons nur in Inhaltselementen vom Typ "Text" angezeigt. Die Abbildung zeigt wie der RTE in diesem Fall aussehe kann (dies hängt natürlich auf von der verwendent Typo3-Version sowie der installierten Skin ab).