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

Microsoft nennt weitere Details zu kostenpflichtigen Patches für Windows 10

Erstmals liegen Preise für Verbraucher vor. Sie zahlen weniger als Geschäftskunden. Dafür beschränkt Microsoft den…

7 Stunden ago

Microsoft verschiebt erneut Copilot Recall

Die Entwickler arbeiten noch an weiteren „Verfeinerungen“. Windows Insider erhalten nun wohl eine erste Vorschau…

1 Tag ago

GenKI im Job: Mitarbeitende schaffen Tatsachen

Laut Bitkom-Umfrage werden in jedem dritten Unternehmen in Deutschland private KI-Zugänge genutzt. Tendenz steigend.

1 Tag ago

97 Prozent der Großunternehmen melden Cyber-Vorfälle

2023 erlitten neun von zehn Unternehmen in der DACH-Region Umsatzverluste und Kurseinbrüche in Folge von…

1 Tag ago

„Pacific Rim“-Report: riesiges, gegnerisches Angriffs-Ökosystem

Der Report „Pacific Rim“ von Sophos beschreibt Katz-und-Maus-Spiel aus Angriffs- und Verteidigungsoperationen mit staatlich unterstützten…

1 Tag ago

DeepL setzt erstmals auf NVIDIA DGX SuperPOD mit DGX GB200-Systemen

NVIDIA DGX SuperPOD soll voraussichtlich Mitte 2025 in Betrieb genommen und für Forschungsberechnungen genutzt werden.

1 Tag ago