Mit dieser Anleitung möchte ich Ihnen zeigen, wie Sie ganz einfach eine neue Tabellenklasse zum RTE hinzufügen können um Ihre Webseite nach Ihrem belieben zu personalisieren.
Übersicht
Es gibt insgesamt nur 3 Dateien, um die Sie sich kümmern müssen.
- typo3conf/ext//Configuration/TypoScript/RTE.ts
- typo3conf/ext//Configuration/TypoScript/setup.txt
- typo3conf/ext//Resources/Public/css/rte.css
Integration des CSS Codes
Öffnen Sie die Datei “rte.css” und fügen Sie eine neue Klasse hinzu. Das korrekte CSS Format für Tabellenklassen sieht so aus:
table.MYCLASS{
/* CSS code */
}
Ersetzen Sie den Platzhalter “MYCLASS” mit dem Namen, den Sie für die Tabelle verwenden möchten und fügen Sie Ihren CSS Code dieser Klasse hinzu.
Änderungen in der setup.txt
Nun bearbeiten Sie die Datei setup.txt und fügen die folgende Zeile am Ende ein:
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = MYCLASS
Sollte diese Zeile bereits existieren, aber mit anderen Klassennamen, fügen Sie Ihre Klasse mit einem Komma separiert ans Ende, Beispiel:
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = foo, bar, MYCLASS
Wichtig! Der Platzhalter “MYCLASS” muss hierbei der selbe sein wie in der “rte.css” Datei.
Überarbeiten der RTE TypoScript Datei
Die letzte Datei, die Sie bearbeiten müssen, ist die TypoScript Datei des RTEs genannt “RTE.ts“. Fügen Sie folgenden Wert in diese Datei ein:RTE.default.buttons.blockstyle.tags.table.allowedClasses = MYCLASS
Jedoch kann es sein, dass es bereits Abschnitte gibt. Häufig werden “RTE.default” und “buttons” zusammengefügt.
Das sieht in der Praxis ungefähr so aus:
RTE.default{
...
buttons {
blockstyle.tags.ul.allowedClasses := addToList(foo, bar)
}
}
Sie können hier in dem Abschnitt ‘buttons‘ den Code-Schnipsel in einer verkürzten Variante angeben, der so aussieht:blockstyle.tags.table.allowedClasses = MYCLASS
Sollte ein Abschnitt fehlen, können Sie ihn am Anfang einfügen. Hier sind ein paar Möglichkeiten, wie der Schnipsel aussehen könnte:
default.buttons.blockstyle.tags.table.allowedClasses = MYCLASStags.table.allowedClasses = MYCLASStable.allowedClasses = MYCLASS
Als Nächstes müssen Sie im Abschnitt ‘proc‘ eine Zeile finden, die anfängt mit allowedClasses := addToList. Sie sehen hinter ‘addToList‘ eine kommaseparierte Liste. Fügen Sie in dieser Liste Ihren Klassennamen an irgendeine Stelle ein und vergessen Sie die Klammern nicht.
Beispiel:allowedClasses := addToList(MYCLASS, link, indent-1, indent-2, indent-3)
Zuletzt suchen Sie den Abschnitt RTE.mutuallyExclusiveClasses.
Sollte dieser existieren:
Nehmen Sie die nächste Zahl in der zehner-Reihenfolge und geben Sie ihm als Wert den Namen ihrer Klasse.
Beispiel:
RTE.mutuallyExclusiveClasses {
10 = text-left, text-right, text-center
20 = small, lead
30 = MYCLASS
}
Sollte dieser nicht existieren:
Erstellen Sie einen neuen Abschnitt mit dem Namen “RTE.mutuallyExclusiveClasses” und fügen Sie einen neuen Wert hinzu nach dem Schema 10 = MYCLASS.
So sollte das Resultat etwa aussehen:
RTE.mutuallyExclusiveClasses {
10 = MYCLASS
}
Nun nur noch den Cache leeren und Sie können die Klasse im Backend und Frontend benutzen.
Die Tabellenklasse im RTE ändern
Es ist ganz einfach, einer Tabelle eine neue Klasse zuzuordnen. Öffnen Sie einen RTE und wählen Sie die Tabelle aus, die sie bearbeiten möchten und klicken Sie auf den “Tabelle bearbeiten” Button.
Im Bereich “Style” beziehungsweise “CSS-Stil” finden Sie ein Dropdown Menü namens “Tabelle”. In diesem Dropdown Menü sollten Sie nun Ihre neue Tabellenklasse finden.
Wählen Sie Ihre Klasse aus und drücken Sie auf “OK”. Damit wären Sie nun fertig und das Ergebnis sollte im Frontend sichtbar sein.
