Farbiger, formatierter Text in Webformularen: In Javascript programmierte Editoren, die auf den Design-Modus der Webbrowser aufsetzen, machen dies möglich. Diese Bitparade analysiert die Fähigkeiten von drei so genannten Rich-Text-Editoren.

Dass HTML per Formular nur unformatierten Text zum Server übertragen kann, stört vielfach. Zuerst erkannte dies Microsoft und baute in den Internet Explorer eine Technik ein, die das Manko umgeht. Der so genannte Design Mode bewirkt, dass sich HTML-Elemente direkt aus dem Browser bearbeiten lassen. Dazu reicht es, den Javascript-Befehl »Element.designMode = “On”« auf das zu bearbeitetende Element anzuwenden. Anfang 2003 zog Mozilla mit Version 1.3 nach. Seit Sommer 2006 (Version 9.0) beherrscht dies auch Opera.

Die Design-Mode-Schnittstelle ist noch kein vollwertiger Editor. Bearbeiten Anwender den Text, bleiben bestehende Formatierungen zwar erhalten, sie können jedoch keine neuen hinzufügen. Aber der HTML-Code des Elements im Design Mode lässt sich weiterhin mit Javascript über DOM [1] ansprechen. Mit dieser Kombination aus dynamisch veränderbarem HTML-Code und der Möglichkeit, Text einzugeben, lässt sich in Javascript ein vollwertiger Wysiwyg-HTML-Editor programmieren.

Diese Bitparade stellt drei Editoren dieser Art vor. Ihre Einsatzmöglichkeiten reichen von Foren oder Gästebüchern bis hin zu Contentmanagement-Systemen. Die vorgestellten Editoren unterscheiden sich einerseits in ihrem Funktionsumfang (Tabelle 1). Nicht auf den ersten Blick zu erkennen, bei öffentlich zugänglichen Webanwendung andererseits besonders wichtig ist die Zusammenarbeit mit verbreiteten Webbrowsern (Tabelle 2).

Dojo Rich Text Editor

Die Ajax-Library Dojo [2] enthält neben vielen Ajax-spezifischen Funktionen auch einen Rich-Text-Editor (siehe Abbildung 1). Dessen Funktionsumfang deckt sich mit den einfachen Formatierungen des gleichnamigen Dateiformats: Text lässt sich kursiv, fett, unterstrichen und durchgestrichen darstellen. Die Zeilenausrichtung ist auf linksbündig, rechtsbündig und zentriert einstellbar. Außerdem bietet der Editor noch einen Farbwähler für die Text- und Hintergrundfarbe und formatiert den Text als nummerierte und als Bullet-Liste.

Der Dojo-Editor bindet auch Links und Grafiken ein. Dojo versieht die Bilder aber nicht mit einem Formatierungsattribut wie »align=”left”«, sodass der Browser die HTML-Standardeinstellung benutzt. Er richtet die Grafik am unteren Zeilenrand aus, die Zeilenhöhe von umfließendem Text wächst auf die Höhe der Grafik an. Die Javascript-Methode »editor.getEditorContent()« gibt den bearbeiteten HTML-Code zurück. Alternativ darf ein Webentwickler den Dojo-Editor auch als HTML-Formularelement einbinden, das dann den Inhalt des Editor-Fensters per »POST« an den Server versendet.

Tinymce

Tinymce [3] bietet einen wesentlich größeren Funktionsumfang als der Dojo-Editor, er nähert sich gar gängigen Textverarbeitungsprogrammen an. Neben einfachen RTF-Formatierungen unterstützt er Tabellen und benutzerdefinierte Styles. Die Zellen bestehender Tabellen lassen sich nachträglich zusammenfügen oder unterteilen. Die Software stellt für diese und andere Funktionen ein optisch ansprechend gestaltetes Kontextmenü zur Verfügung (Abbildung 2).

Der CSS-Style-Editor beherrscht einen guten Teil des CSS-Sprachumfangs. Allerdings lassen sich die hier erstellten Stile nicht dem Dropdown-Feld »Styles« hinzufügen und so erneut nutzen. Den Inhalt der »Styles«-Liste legt der Entwickler beim Einbinden in die Seite fest.

Bilder und Farbe

Beim Einfügen von Bildern stehen dem Benutzer HTML-Optionen zur Positionierung zur Verfügung. Als Addon ist ein Dateimanager verfügbar, der Grafikdateien auf dem Server verwaltet und sich in Tinymce nahtlos integriert.

Die Farbwähler für Vordergrund- und Hintergrundfarbe enthalten außer den 35 bereits vordefinierten Farben eine Option »More colors« für das stufenlose Mischen. Der Editor kennt Layer, also im Text positionierte Boxen, die sich mit der Maus verschieben lassen. Hat der Anwender viele verschachtelte Formatierungen eingefügt und möchte sie später wieder löschen, hilft entweder die HTML-Quellcode-Ansicht oder – für Anwender ohne HTML-Kenntnisse – die Funktion »Remove Formatting«. Für die Kontrolle bietet die Software eine Vorschau, die den HTML-Code in einem extra Fenster anzeigt.

Die Sonderzeichenpalette fügt Zeichen, die nicht auf der Tatstur zu finden sind, korrekt HTML-kodiert ein. Selbst eine Suchen-und-Ersetzen-Funktion ist vorhanden. Tinymce lässt sich außerdem über eine Plugin-Schnittstelle erweitern. Beispiele finden sich im Forum [4]. Unter [5] steht zusätzlich eine Rechtschreibprüfung zur Verfügung, die allerdings eine Ispell- oder Aspell-Installation auf dem Server voraussetzt.

Schnelle Anbindung

Beim Einbinden in seine Site kann der Entwickler die Anzahl der Funktion, die für den Benutzer sichtbar sein sollen, beschränken. Da sich Tinymce als »textarea« in ein gewöhnliches HTML-Formular einbinden lässt, ist die Übernahme des eingegebenen HTML-Code nicht schwierig. Diese Einbindung bedeutet allerdings auch, dass bei jedem Klick auf den »Speichern«-Button die Seite mit dem Editor neu vom Server geladen wird. Eine Ajax-Integration ist jedoch grundsätzlich möglich [6].

Fckeditor

Der Fckeditor [7], der viele Jahre als der führende Wysiwyg-Javascript-Editor galt, fällt im Vergleich mit Tinymce in einem wichtigen Punkt zurück. Er enthält keinen CSS-Editor und schränkt so die Gestaltungsfreiheit des Anwenders ein. Ansonsten hält er jedoch mit, seine Tabellenwerkzeuge sind ebenso leistungsfähig wie bei Tinymce. Auch der Fckeditor zeigt nach einem Klick mit der rechten Maustaste ein übersichtlich gestaltetes Kontextmenü.

Grafiken lassen sich genauso flexibel einbinden. Ohne zusätzliche Installation steht ein Werkzeug für den Upload und die Verwaltung der Dateien zur Verfügung. Das Tabellenwerkzeug ist mit dem in Tinymce vergleichbar. Eine Rechtschreibprüfung, eine Suchen-und-Ersetzen-Funktion und eine Sonderzeichenpalette runden den Funktionsumfang ab, der auch den Fckeditor in die Nähe einer Desktop-Textverarbeitung rückt.

Flash und Formulare

Fckeditor kennte keine Layer, besitzt jedoch dafür ein Werkzeug für das Einbinden von Flash-Animationen, das bei Foren, bei denen der Webmaster dies seinen Benutzern erlaubt, zum Einsatz kommen könnte. Ein Formulareditor erzeugt HTML-Formulare. Diese Funktion hat allerdings wenig Sinn, wenn Fckeditor als öffentlich zugängliches Frontend im Internet steht, sie kann sich jedoch in Contentmanagement-Systemen als nützlich erweisen. Wie Tinymce lässt sich auch Fckeditor durch Plugins erweitern (Beispiele zeigt [8]).

Fazit

Der Rich-Text-Editor Dojo ist eine Zugabe, die das umfangreiche Ajax-Toolkit Dojo neben anderen Ajax-Widgets mitbringt. Sein Leistungsumfang ist auf einfache Schriftformatierungen beschränkt. Allerdings bringt der Dojo-Editor als einziger im Testfeld eine fertige Ajax-Unterstützung mit. Die Browser-Kompatibilität spricht ebenfalls für ihn.

Tinymce und Fckeditor bieten bis auf den CSS-Editor, der ein nennenswertes Gewicht für Tinymce in die Waagschale wirft, vergleichbare Funktionalität. Wer Formulare erstellen oder Flash-Dateien einbinden möchte, kann dies mit Fckeditor tun. Bei den Browsern ist Tinymce weniger wählerisch. Fckeditor schaltet dagegen den Rich-Text-Editor ab, wenn er in einem Browser läuft, der ihm nicht als kompatibel bekannt ist.

In der Praxis bedeutet dies, dass er auf weniger Browsertypen funktioniert als Tinymce. Unter dem Strich ist allerdings der Leistungsumfang beider Editoren so gut, dass sie sogar als Ersatz für einen Wysiwyg-HTML-Editor in Frage kommen, für den bislang auf dem Linux-Desktop keine überzeugende Lösung vorhanden ist.