Javascript-Wysiwyg-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.