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

Black Friday: Vorsicht vor schädlichen QR-Codes

Bösartige QR-Codes, die per E-Mail versendet werden, eignen sich sehr gut, um Spam-Filter zu umgehen.

2 Stunden ago

Black Friday: Zahl der ominösen Shopping-Websites steigt

Unsichere Websites und Phishing-Mails in Verbindung mit Black Friday können kauffreudigen Konsumenten zum Verhängnis werden.

2 Stunden ago

SmokeBuster bekämpft SmokeLoader

Malware SmokeLoader wird weiterhin von Bedrohungsakteuren genutzt, um Payloads über neue C2-Infrastrukturen zu verbreiten.

9 Stunden ago

Taugen Kryptowährungen als Unterstützer der Energiewende?

Bankhaus Metzler und Telekom-Tochter MMS testen, inwieweit Bitcoin-Miner das deutsche Stromnetz stabilisieren könnten.

1 Tag ago

Supercomputer-Ranking: El Capitan überholt Frontier und Aurora

Mit 1,7 Exaflops ist El Capitan nun der dritte Exascale-Supercomputer weltweit. Deutschland stellt erneut den…

1 Tag ago

Ionos führt neue AMD-Prozessoren ein

Der deutsche Hyperscaler erweitert sein Server-Portfolio um vier Angebote mit den neuen AMD EPYC 4004…

1 Tag ago