CMS-Entwicklung mit WYSIWYG-Modus

Bevor die DHTML-Komponente von Microsoft die Bühne betrat, griffen Web-Entwickler, die WYSIWYG-Editoren in ihre Content-Management-Systeme integrieren wollten, entweder auf Plugins zurück oder entwickelten benutzerspezifische DHTML-Lösungen. In mancherlei Hinsicht stellen diese Methoden hier immer noch die beste browser- und plattformübergreifende Lösung dar, und es gibt viele kostenlose und kommerzielle Produkte, die diese Technologie nutzen und sofortige WYSIWYG-Fähigkeiten für bestehende HTML-Formulare anbieten.

Inzwischen steht mit der ursprünglich als Teil von Internet Explorer 5 vorgestellten Entwurfsmodusfunktionalität eine elegantere browserübergreifende Lösung zur Verfügung, die nun auch von Mozilla 1.3+, Firefox 0.6.1+ und Netscape 7.1+ unterstützt wird.

Wie bei jeder Form von DHTML ist es leider noch immer erforderlich, eine Überprüfung im Browser durchzuführen, um die Anpassung an das entsprechende DOM (Dokumentenobjektmodell) auf dem Client vorzunehmen. Um die Bearbeitung im Entwurfsmodus des Internet Explorers zu ermöglichen, wird einfach ein IFRAME für den Editor erstellt und dessen designMode-Eigenschaft, wie in Listing J gezeigt, zugeordnet.

Listing J

Um in Mozilla-Browsern in den Entwurfsmodus zu gelangen, wird die Eigenschaft contentDocument wie folgt verwendet:

Listing K

Nun muss der entsprechende Code an den Browser geschickt werden, was über eine Überprüfung auf die Eigenschaft document.all erfolgen kann, welche nur durch das Internet Explorer DOM unterstützt wird. In diesem Fall sieht der Skriptblock also folgendermaßen aus:

Listing L

Nachdem nun die Methode zum Auffinden des Editoren-IFRAME-Elements festgelegt und der Entwurfsmodus aktiviert ist, können Befehle mit der vertrauten Funktion execCommand() übergeben werden.

Diese benutzerspezifische Funktion zeigt, wie man eine browserübergreifende Implementierung dieses Befehls erstellt.

Listing M

Nachfolgend ein Beispiel dafür, wie man mit dieser Funktion den markierten Text fett formatieren kann:

Listing N

Da der Code die Funktion execCommand verwendet, kann er bei Bedarf verwendet werden, um eine WYSIWYG-Anwendung, die das DHTML Active X-Steuerelement nutzt, als browserübergreifende Version anzupassen.

Die einfache Methode

Obwohl die komplette Erstellung von DHTML-Editoren wahre Wunder bewirkt, was Kenntnisse über das DOM und die Fähigkeiten des Entwurfsmodus betrifft, so gibt es doch auch Dutzende von Open-Source-Beispielen, mit denen man schnell auf Touren kommt.