CMS-Entwicklung mit WYSIWYG-Modus

Will man ein webbasiertes „What-you-see-is-what-you-get“-Content-Management-System entwickeln, dann gibt es verschiedene Optionen, die man ausprobieren kann.
Die meisten webbasierten Content-Management-Systeme bauen auf standardmäßigen HTML-Formularen auf, um eine Datenbank mit den von den Benutzern eingegebenen Inhalten zu füttern. Dieses Tutorial beschäftigt sich mit verschiedenen Möglichkeiten, Textbereichselemente in Web-Formularen mit Rich-Text-Editoren zu ersetzen, die zwar den gleichen Zweck erfüllen, es den Benutzern aber ermöglichen, Inhalte im WYSIWYG-Format zu bearbeiten.

Die Microsoft-Methode

Microsoft kündigte sein DHTML Editing Component, das mit dem Internet Explorer 5 ausgeliefert wurde, bereits im Jahr 1999 an. Als Active X-Steuerelement beschränkte sich sein Einsatz auf die Windows-Versionen des Browsers, erlaubte allerdings Web-Entwicklern, mit nur wenigen Zeilen Code eine Rich-Text-Editing-Funktion in HTML-Formulare zu integrieren. Seit jener Zeit ist diese Komponente an Dutzende von kostenlosen und kommerziellen DHTML-Skripte angepasst worden, die eigens für das Management von Web-Inhalten geschrieben wurden. Die Erstellung eines solchen Skripts beginnt mit dem zum Aufruf der Komponente erforderlichen OBJECT-Tag, anschließend wird eine Reihe von Javascript-Befehlen benötigt, um weitere Funktionen hinzuzufügen. Da die DHTML-Editing-Komponente über keinerlei Symbolleisten- oder Benutzeroberflächenelemente verfügt, ist es erforderlich, dass alle Aufbereitungsarbeiten wie zum Beispiel Änderungen der Schriftart, -größe oder -farbe programmatisch durchgeführt werden.

Listing A

Dieser Code ist das Mindeste, was für die Erstellung einer Instanz des DHTML-Objekts erforderlich ist, die das hier gezeigte Ergebnis produziert. Anschließend wird die Methode ExecCommand() zum Auslösen von Ereignissen innerhalb des Editor-Objekts verwendet. Der folgende Code beispielsweise formatiert den markierten Text im Editor fett, wenn das verknüpfte „B“ angeklickt wird.

Listing B

Mit dem hier aufgeführten Code kann ein einfacher DHTML-Editor für simple Textformatierungen erstellt werden.

Listing C

Die hier verwendeten Variablen speichern die von dem Active X-Steuerelement erwarteten Konstanten. Eine komplette Liste dieser Werte befindet sich in der Datei dhtmled.js, die in Microsofts DHTML-Beispielanwendung (editcntrl.exe) enthalten ist. Diese Datei kann mit der nachstehenden Syntax in die Seite eingebunden werden:

Listing D

Indem man die in dieser Datei enthaltenen Befehle mit einer Mischung aus Javascript und Schaltflächensymbolen kombiniert, kann man eine Symbolleiste mit allen erforderlichen Funktionen eines benutzerspezifischen WYSIWYG-Editors erstellen. Das Einzige, was fehlt, ist der Code, um den Inhalt des Editors einem Formularfeld zuzuordnen, das als Teil eines HTML-Formulars übermittelt werden kann. Das kann über ein ausgeblendetes Feld im Formular erfolgen, dem der HTML-Inhalt beim Abschicken des Formulars dynamisch zugeordnet wird. Zugriff auf den Inhalt des DHTML-Steuerelements erfolgt über dessen Eigenschaft DOM.body.innerHTML, wie es in Listing E gezeigt wird.

Listing E

Offensichtlich ist die DHTML-Komponente eine sehr schnelle und einfache Methode zur Integration der WYSIWYG-Funktionalität in ein IE-basiertes Content-Management-System. Möchte oder muss man allerdings den Mozilla-Browser unterstützen, so muss man sich nach einer anderen Lösung umsehen.

Page: 1 2 3

ZDNet.de Redaktion

Recent Posts

Studie: Ein Drittel aller E-Mails an Unternehmen sind unerwünscht

Der Cybersecurity Report von Hornetsecurity stuft 2,3 Prozent der Inhalte gar als bösartig ein. Die…

3 Tagen ago

HubPhish: Phishing-Kampagne zielt auf europäische Unternehmen

Die Hintermänner haben es auf Zugangsdaten zu Microsoft Azure abgesehen. Die Kampagne ist bis mindestens…

4 Tagen ago

1. Januar 2025: Umstieg auf E-Rechnung im B2B-Geschäftsverkehr

Cloud-Plattform für elektronische Beschaffungsprozesse mit automatisierter Abwicklung elektronischer Rechnungen.

4 Tagen ago

Google schließt schwerwiegende Sicherheitslücken in Chrome 131

Mindestens eine Schwachstelle erlaubt eine Remotecodeausführung. Dem Entdecker zahlt Google eine besonders hohe Belohnung von…

4 Tagen ago

Erreichbarkeit im Weihnachtsurlaub weiterhin hoch

Nur rund die Hälfte schaltet während der Feiertage komplett vom Job ab. Die anderen sind…

5 Tagen ago

Hacker missbrauchen Google Calendar zum Angriff auf Postfächer

Security-Experten von Check Point sind einer neuen Angriffsart auf die Spur gekommen, die E-Mail-Schutzmaßnahmen umgehen…

6 Tagen ago