Die Technik von WYSIWYG-Editoren

[AnubiS]

Immer wieder sieht man Online WYSIWYG-Editoren, die HTML-Code für Websites erzeugen. Ich rede nicht von Frontpage oder so einen Kram, sondern meine diese, die zum Beispiel in Content Management Systemen wie Typo3 eingesetzt werden (htmlarea, rte, ...).

Aber wie funktionieren solche Editoren? Ich würde gerne die Grundlagen dafür begreifen. Immerhin steht der Text in einer textarea. Und diese zeigt Quellcode ja normalerweise direkt an. Wie bringt man eine textarea also dazu, daß der dort enthaltene Code interpretiert wird?

[Felix Riesterer]

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.

[Rouven]

Hi,

na ja, die Seite dürfte mit JavaScript mehr machen als du auf den ersten Blick glaubst. Ich habe mir den Code noch nicht genauer angeschaut, aber die Textarea dürfte erstmal aus- und stattdessen ein div, span, ... eingeblendet werden.
Hier benutzt man dann, mehr oder weniger browser-spezifische, Eigenschaften:
contentEditable (IE)
designMode
Hinweise zu Mozilla

MfG
Rouven

[AnubiS]

Achsooo ist das :-)
Besten Dank, jetzt wo ich weiß wonach ich suchen muss lässt sich auch ne Menge zu dem Thema finden.