Eine neue Tabellenklasse zum RTE in TYPO3 6.2 hinzufügen

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 = MYCLASS
  • tags.table.allowedClasses = MYCLASS
  • table.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.

xTagvMX

Im Bereich “Style” beziehungsweise “CSS-Stil” finden Sie ein Dropdown Menü namens “Tabelle”. In diesem Dropdown Menü sollten Sie nun Ihre neue Tabellenklasse finden.

Screen Shot 1

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.

Weitere interessante Artikel
TYPO3 vs. WordPress

Heute beleuchten wir WordPress und TYPO3, welche beide Content Management Systeme sind und unterschiedliche Zielgruppen