Auf deutsch anzeigenDisplay in English

 

:: Home  :: Sitemap  :: Downloads  :: Shop  :: Impressum  :: Newsletter

:: Produkte  :: Support  :: dataweb

Support

:: NEWS :: Mit NShape können Entwickler MS Visio-ähnliche Funktionalität in Ihre Anwendungen integrieren. NShape ist Open Source und speziell für industrielle Anwendungen gemacht. Mehr...

Support-Optionen ::
Häufig gestellte Fragen ::
Produktdokumentation ::
Ergänzendes Material ::
Diskussions-Forum ::
NShape Feedback ::
Partner ::
Service-Releases ::
Artikel ::
Datenbank- und SQL-Links ::
ISAPI-Links ::

MSHTML-Editiermodus in Delphi-Applikationen

In diesem Artikel wird beschrieben, wie man die TWebBrowser-Komponente von Delphi als WYSIWYG HTML-Editor einsetzen kann.

Der MSHTML-Editiermodus ermöglicht es, HTML-Editier-Funktionen in eigene Anwendungen zu integrieren. Dazu hostet man das WebBrowser ActiveX-Control, das seit Internet Explorer 5.5 über einen Design-Modus verfügt. Die Möglichkeiten gehen von einfachem Editieren von formatiertem Text bis zu ausgefeilter benutzerdefinierter Anzeige und praktisch unbegrenzten Einflussmöglichkeiten in die Bearbeitung. Einige Ideen für den Einsatz des MSHTML-Editiermodus:

  • Als Texteditor statt dem RichEdit-Control bietet MSHTML erheblich mehr Möglichkeiten
  • Wenn HTML-Dateien erzeugt und bearbeitet werden sollen, z.B. Dokumente aus dem Web
  • MSHTML ist ein besserer HTML-Editor als Word
  • HTML als Textformat für Datenbank-Dokumente (Memos)

Auf dieser Seite finden Sie Erläuterungen zu MSHTML für Delphi-Programmierer sowie Links, Beispiel-Code und die dataweb HTMLEditor-Komponente als FreeWare.

Was ist MSHTML?

Seit der Version 4 unterstützt der Internet Explorer Dynamic HTML (DHTML), eine Technik mit der Web-Seiten mittels Skripts geändert werden können, wenn sie schon geladen sind. Das zentrale Element von DHTML ist das Document Object Model (DOM), das alle Elemente einer Web-Seite für die Skriptsprache als Objekte zur Verfügung stellt. Diese Objekte haben Eigenschaften, Methoden und Ereignisse, die in der Skriptsprache benutzt werden können.

MSHTML bringt das DOM über COM-Schnittstellen nach außen, d.h. zu der Applikation, die z.B. das WebBrowser-Control einbindet. Dadurch hat man von der Applikation aus alle Möglichkeiten, die DHTML bietet und noch erheblich mehr. Zusätzlich verfügt MSHTML seit IE 5.5 über einen Editiermodus, der das direkte visuelle Bearbeiten der Web-Seite zulässt. Für Delphi-Entwickler bedeutet das: Die WebBrowser-Komponente ist nicht nur ein HTML-Viewer sonder auch ein HTML-Editor, den man auf vielerlei Weise sinnvoll einsetzen kann. Im folgenden wird erklärt, wie es funktioniert. Voraussetzung für das Verständnis sind allerdings gute Kenntnisse in COM, wie sie z.B. in dem hervorragenden Buch von Andreas Kosch: COM/DCOM/COM+ mit Delphi vermittelt werden.

Das Document Object Model

Das DOM von DHTML ist eine Hierarchie von HTML-Elementen an deren Spitze das Dokument steht. Dieses enthält u.a. ein Header- und ein Body-Element, welche wiederum Texte, Bilder, Hyperlinks und viele andere Arten von Elementen enthalten. Diese Elemente haben Eigenschaften wie Id, Farbe, Größe usw, welche über das DOM abgefragt und verändert werden können. Außerdem stellen die Elemente Methoden zur Verfügung, mit den Aktionen ausgelöst werden können, z.B. click, um einen Mausklick zu simulieren oder focus, um das Element zu fokussieren. Schließlich teilt das Element auch noch Ereignisse seiner Umwelt mit wie z.B. onclick, wenn der Anwender das Element angeklickt hat.

Diese Hierarchie von Objekten wird dem Delphi-Entwickler in Form von COM-Schnittstellen zur Verfügung gestellt. Der Schlüssel liegt in der Eigenschaft TWebBrowser.Document. Diese Eigenschaft liefert das IDispatch-Interface des DHTML Dokumenten-Objektes. Wie in Delphi üblich kann man sich von diesem Interface ausgehend mit dem Operator as weitere Interfaces holen. Eine zentrale Rolle nimmt das Interface IHTMLDocument2 ein, das die wesentlichen Methoden und Eigenschaften des Dokumenten-Objekts enthält. Wann immer im folgenden von HTMLDocument2Ifc die Rede sein wird, ist dieser Interface-Zeiger gemeint, den man mit WebBrowser.Document as IHTMLDocument2 erhält.

Den Editiermodus aktivieren und Befehle geben

IHTMLDocument2 hat eine Eigenschaft designMode, welche die Werte 'On' und 'Off' annimmt. Die Vorgabe ist 'Off' und wenn man den Wert auf 'On' ändert, ist der Design-Modus aktiv, d.h. der Anwender kann Text ändern, löschen und einfügen sowie Bilder und Hyperlinks (über das Kontext-Menü) hinzufügen und bearbeiten.

// Mit diesem Befehl wird der Editiermodus aktiviert
(WebBrowser.Document as IHTMLDocument2).designMode := 'On';  

Viele Befehle und Abfragen im Editier-Modus arbeiten mit generischen Typen und Strings. Das kommt daher, das es sich im Grunde um eine Schnittstelle für Skript-Sprachen handelt, die möglichst einfach zu verstehen sein muss. Auch die Methode zum Auslösen einfacher Aktionen gehört zu dieser Gruppe. Mit IHTMLDocument2.execCommand werden Element eingefügt und gelöscht, Schriftarten und Farben geändert sowie vieles mehr. Als Argumente übergibt man hier nur einen String für den Befehlstyp, einen weiteren String für den Befehls-Wert und manchmal eine Boolsche Variable, die angibt, ob MSHTML einen Dialog anzeigen soll oder nicht:

function execCommand(const cmdID: WideString; showUI: WordBool; value: OleVariant):WordBool;safecall;  

Damit kann man schon eine ganz Menge anfangen. Hier sind einige Beispiele für Befehle, die vollständige Liste findet man in der Microsoft MSHTML-Dokumentation.

cmdID Mögliche Werte für value Bedeutung
Bold - Schaltet die aktuelle Selektion zwischen Fettschrift und Normal um
Copy - Kopiert die aktuelle Selektion in die Zwischenablage
Delete - Löscht die aktuelle Selektion
FontName z.B. Arial, Times New Roman Setzt die Schriftart für die aktuelle Selektion
FontSize 1..7 Setzt die Schriftgröße für die aktuelle Selektion
ForeColor HTML-Farbwert als String Setzt die Farbe (z.B. Textfarbe) für die aktuelle Selektion
FormatBlock z.B. Überschrift 1, Aufzählung Setzt das Block-Format für die aktuelle Selektion
InsertInputText - Fügt ein Editierfeld ein
JustifyRight - Richtet die Selektion rechtsbündig aus
Print - Öffnet den Druckdialog, damit der Anwender die aktuelle Seite drucken kann

In diesem Beispiel wird die aktuelle Selektion als Überschrift 1 in Größe 7 fett und rot gesetzt:

HTMLDocument2Ifc := WebBrowser.Document as IHTMLDocument2;  
HTMLDocument2Ifc.execCommand('FormatBlock', False, 'Überschrift 1');   
HTMLDocument2Ifc.execCommand('FontSize', False, 7);  
HTMLDocument2Ifc.execCommand('Bold', False, 0);   
HTMLDocument2Ifc.execCommand('ForeColor', False, '#0000FF');  

Mit einem ähnlichen Befehl kann man abfragen, wie die entsprechende Einstellung bei der aktuellen Selektion ist. Z.B. liefert HTMLDocument2Ifc.queryCommandValue('Bold') den Wert True, wenn die aktuelle Selektion die Eigenschaft fett besitzt.

Neu, Laden, Speichern

Zum Laden und Speichern unterstützt das Dokumenten-Objekt neben IHTMLDocument2 noch eine weitere Schnittstelle IPersistFile. Dies ist eine allgemeine COM-Schnittstelle, die von Objekte implementiert wird, die persistente Daten verwalten. Die Methoden sind:

function IsDirty: HResult; stdcall;  function Load(pszFileName: POleStr; dwMode: Longint): HResult; stdcall;  
// Mode gibt den Zugriffs-Modus auf die Datei an  
function Save(pszFileName: POleStr; fRemember: BOOL): HResult; stdcall;  
// Falls fRemember = True, wird der interne Dateiname auf pszFileName gesetzt  
function SaveCompleted(pszFileName: POleStr): HResult; stdcall;  
function GetCurFile(out pszFileName: POleStr): HResult; stdcall;

Damit wird das Laden und Speichern des HTML-Dokuments ein Kinderspiel:

(WebBrowser.Document as IPersistFile).Load('c:\test.html', 0);  
(WebBrowser.Document as IPersistFile).Save('c:\test.html', True);  

Um ein neues leeres Dokument anzulegen, könnte man eine leere Datei erzeugen und dann mit IPersistFile.Load laden. Eine andere Möglichkeit ist die Methode Navigate des WebBrowsers selbst. Die URL about:blank bezeichnet ein leeres Dokument:

WebBrowser.Navigate('about:blank');  

Dabei muss man darauf achten, das Navigate eine asynchrone Methode ist. D.h. mit dem obigen Aufruf wird das Laden des neuen Dokuments zwar gestartet, es ist jedoch nicht notwendigerweise beendet, wenn der Aufruf zurückkehrt. Aus diesem Grund müssen manche Einstellungen am Dokument im Event-Handler zu OnNavigateComplete2 statt einfach hinter dem Aufruf von Navigate erledigt werden.

Fortsetzung folgt unter anderem zu folgenden Themen:

  • Zugriff auf DHTML-Eigenschaften
  • Steuerelemente
  • Text Range
  • Events
  • Scripting Events
  • Edit Designer

Links

MSDN Library: The MSHTML Editing Platform in Internet Explorer 5.5

MSDN Library: Using MSHTML Editing

Euromind: http://www.euromind.com/iedelphi/

Beispielprogramm

Das Beispielprogramm wurde mit Delphi 6 erstellt und demonstriert die hier vorgestellten Techniken.