Table Head in TinyMCE 04. October 2007 um 21:04 Uhr / Webdesign

Eingestellt am 04. October 2007 um 21:04 Uhr » Webdesign

Heute habe ich eine Aufgabe auf der Arbeit erledigt, die ich wirklich lange vor mir hergeschoben habe, und das zu unrecht, denn so schwierig war das gar nicht.

Wir verwenden TinyMCE in unserem Werkzeug als WYSIWYG-Editor und ein Kunde wollte auf seiner Webseite Tabellen mit Daten über seine Firma stellen. Was ihm aber sehr wichtig war, war es dass die Tabellen auch sinnvoll strukturiert sind. So erfreulich es auch ist dass ein kunde Tabellendaten statt in einem Bild als semantisch korrekte HTML-Tabelle haben will, so ungewöhnlich ist der Wunsch auch.

Das führte dazu dass ich mich erst einmal auf die Suche machen musste wie man so etwas denn mit TinyMCE erledigen kann. Lustigerweise war das ganze so offensichtlich dass schinbar niemand darüber im Internet schreiben wollte ;-).

thead in TinyMCE

Nun ja dann tue ich das mal. Man erstellt eine Tabelle mit dem Tabellenwerkzeug und klickt dann die "rechte Maustaste" auf der Reihe die man zu thead umwandeln möchte. In eben diesem Menü drückt man dann auf Table row properties, im erscheinenden Popup wählt man Row in table part: Table Head auswählen. Danach für jede Zelle dieser Reihe "rechte Maustaste", Table cell properties und im Popup Cell type: Header auswählen und schon ist man fertig!

Warum das für mich dennoch so schwierig zu finden war? Ganz einfach:

1. verwende ich WYSIWYG des TinyMCE nie weil es mir zu umständlich ist, stattdessen schreibe ich mein HTML von Hand
2. funktioniert das ganze in meinem Firefox nicht richtig, weil das Menü, wenn man rechte Maustaste drückt über dem firefoxeigenen und außerhalb des sichtfeldes positioniert wird und ich das bisher noch nie gesehen habe
3. es funktionierte beim Kunden als ich da war auch nicht im IE7, es gab irgend einen JavaScript-Fehler, warscheinlich wegen irgendwelcher Sicherheitseinstellungen

Ich habe es erst gefunden als ich selbst mit dem IE7 und niedrigen Sicherheitseinstellungen versucht habe so eine Tabelle zu bearbeiten.

Was ich aber durch das suchen im Internet noch gefunden habe ist, dass man im TinyMCE auch CSS klassen zuweisen kann, was den vorteil hat, dass man nicht komplett das ganze Aussehen so einer Tabelle im TinyMCE machen muss, der das dann schön ins HTML einfügt, man kann das einfach ins CSS verlegen. Schön ist auch dass die Styles gleichzeitig im TinyMCE selbst benutzt werden, somit ist es dem wirklichen WYSIWYG wenigstens ein stückchen näher.

Wie das funktioniert wird in der Dokumentation beschrieben.

Und jetzt endlich verstehe ich warum ein anderer Kunde so komische Wünsche hatte, die das CSS betreffen. Denn so ganz schön gemacht ist das nicht mit den Styles wie ich es mir wünschn würde, nicht. Aber besser als gar nicht.