In Serendipity gibt es einen eingebauten Editor mit dem namen htmlarea. Mit diesem lassen sich ganz nett Formatierungen ohne HTML-Kenntnisse vornehmen. Man nennt dies Wysiwyg (What you see is what you get). Die Editorkomponente kümmert sich also um das Erstellen des HTML-Codes, während man als Anwender ganz einfach den Text schreiben kann.
Ich war ganz glücklich mit dem Editor bis...
...ich in den HTML-Quellcode gesehen habe. Eine wahnwitzige Verschachtelung von HTML-Code mit Font-Tags etc. überfrachtet. Das kann es nicht sein. Wozu gibt es CSS? Und dann habe ich versucht die Formatierungen zu löschen. Per Hand? Das macht zuviel Arbeit. Es muss eine andere Editor-Komponente her, die das besser beherrscht.
Lösung:
Ich bin hierbei über das TinyMCE-Plugin gestolpert. Vorher hatte ich die FCK-Editor-Komponente getestet, aber irgendwie wollte das Ding bei nicht richtig laufen.
Die TiyMCE-Komponente lässt sich mit dem Serendipity-Plugin Spartacus installieren. Spartacus holt sich quasi die Enstellungsoberfläche zum TinyMCE. Den TinyMCE und den TinyMCECompressor muss man sich noch zusätzlich besorgen. Wie das alles zu machen ist, steht sehr gut beschrieben in der Installationsanleitung des Plugins. Diese befindet sich in der Serendipity Verwaltungsoberfläche unter "Plugins verwalten > TinyMCE > TinyMCE als WYSIWYG Editor benutzen", dort ganz unten.
Die Einstellungen sind alle unkritisch bis auf "Relativer HTTP Pfad des Plugins". Dort habe ich "plugins/serendipity_event_tinymce" (ohne Anführungsstriche) eingetragen.
Damit der Editor korrekt funktioniert waren noch ein paar Anpassungen notwendig:
Ich brauchte noch eine .htaccess, die mir das ModRewrite abstellte, da die Popup-Fenster zu den Einstellungen nicht funktionierten (404):
Rewriteengine Off
Die .htaccess liegt im Verzeichnis "plugins\serendipity_event_tinymce\".
Das nächste Problem war, dass die Mediendatenbank von Serendipity einen 404-Error erzeugt hatte und sich dadurch nicht öffnen ließ. Dieses Problem scheint nur dann aufzutreten, wenn Serendipity in einem Unterverzeichnis, in meinem Fall "/blog", installiert wurde.
Ich habe dies in zwei JavaScript-Dateien hardcodiert, indem ich die Dateien editor_plugin.js und editor_plugin_src.js entsprechend im tinymce-plugin-Verzeichnis s9ymdb im Pfad um den Eintrag /blog angepasst habe:
/blog/serendipity_admin_image_selector.php?...
Super, der Editor funktioniert jetzt!
Feintuning mit CSS-Styles
Die CSS-Styles als Vorauswahl haben mir noch gefehlt. Um nicht wieder Code-Verschachtelungen zu erzeugen, muß ein TinyMCE-Plugin "styleselect" in die Buttonleiste integriert werden.
In der Serendipity Verwaltungsoberfläche unter "Plugins verwalten > TiyMCE > TinyMCE als WYSIWYG Editor benutzen" habe ich zum einen unter "Zusätzliche TinyMCE Plugins " die Angaben ",style,fullscreen" ergänzt und unter "Knopfleiste 3 " die Angaben ",styleselect,styleprops,fullscreen".
styleselect - ist für die auswählbaren Styles zuständig. Hier wird im Editor eine Dropdown-Liste erzeugt, die beim TinyMCE die im Stylesheet definierten Styles anzeigt. Doch woher kommen die Stylesheetangaben? Leider habe ich auf der Website und im Wiki von Moxiecode nicht viel finden können. Letztendlich habe ich durch viel herumprobieren den Ort feststellen können. Das zu bearbeitende Stylesheet liegt unter "plugins\serendipity_event_tinymce\tinymce\jscripts\tiny_mce\themes\advanced\css\editor_content.css". Da dies nur für das Backend dient, müssen die Styles ebenfalls in das eigene Serendipity-Template-Stylesheet eingebaut werden: "templates/yourTemplate/style.css".
styleprops - ergibt einen Schaltknopf für style-Formatierungen
fullscreen - ergibt einen Schaltknopf, um das Editor-Fenster auf Browsergröße zu ziehen
Ein wirklich schöner Button ist der in Serendipity/TinyMCE standardmäßig schon integrierte Button zum entfernen von Formatierungen (removeformat)
Damit lässt sich nun ein Text barrierefrei und ohne "Schnickschnack-überladenen" HTML-Code erzeugen.
Bookmarks:
Delicious Facebook Google Yahoo Mr. Wong Linkarena Digg