Felix Riesterer: Die Technik von WYSIWYG-Editoren

Beitrag lesen

Liebe(r) AnubiS,

Aber wie funktionieren solche Editoren?

ich habe mir den TinyMCE für ein eigenes CMS genauer angesehen und kann sagen, dass er dynamisch die Textarea aus dem Dokument ausschneidet und unsichtbar an anderer Stelle wieder einfügt. An Stelle der Textarea wird eine Tabelle gesetzt, die drei Zeilen aufweist (deren Belegung sich in den Settings steuern lässt):
1. Menü mit Icons für Bendienung/Steuerung des Editors
2. Eingabebereich (die WYSIWYG-Fläche)
3. Statuszeile

In der mittleren Tabellenzelle wird nun ein I-Frame gesetzt, dessen Dokumentinhalt mit einer speziellen Eigenschaft namens 'designMode = "on" ' zum Editieren freigegeben wird. Dieser Mechanismus muss vom Browser unterstützt werden, wovon dann auch abhängt, in welchen Browsern diese Editoren überhaupt eingesetzt werden können. Dazu sei auch gleich angemerkt, dass eine Implementation dieses DesignModes in den verschiedenen Browsern natürlich verschieden ausfällt, da es sich um proprietäre Lösungen handelt. Hmm. Aber ich habe im Zusammenhang mit DesignMode auch etwas vom "Midas-Standard" (für Gecko-Browser) gelesen, sodass man inzwischen wohl versucht, auch in diesem Bereich Ähnlichkeiten in den Implementationen zu wahren.

Ich habe selbst einmal versucht, diesen DesignMode einzusetzen. Da ich aber dieses Projekt momentan ruhen lassen muss, kannst Du das traurige erste Ergebnis meines Versuchs, einen Syntax-Highlighting-Editor in Javascript zu schreiben, einmal daraufhin untersuchen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.