Fooling around with TWebbrowser

For a project I needed to edit a HTML page within a Delphi Win32 application. Delphi has a TWebbrowser component which appeared to be suitable for this situation.
TWebbrowser in fact is a wrapper over Microsoft's Shell Doc Object and Control library (SHDOCVW.DLL) and it brings webbrowser functionality to your application. With a TWebbrowser it is easy to navigate the web and files. There are a lot resources to find on the internet, here I share some of my experiences.

Using TWebbrowser for editing
As said before I needed to edit a HTML webpage. You can get the Document (from the loaded webpage) with MSHTML, a library providing WYSIWYG editing for Internet Explorer and thus TWebbrowser. This HTMLDocument provides access to all the elements of a webpage, and allows you to edit the page visually.
After adding MSHTML to your uses clause you can get the document as follows:

Getting the document:
HTMLDocument2Ifc := (MyWebbrowser.Document as IHTMLDocument2);

Note that the webpage must be completed loaded otherwise the object will be nil.

With a IHTMLDocument2 interface object we can edit the webpage. Now for this project I needed to place links absolute on the page aligned with some body background. But the first thing we need to do is setting the document in edit mode.

Setting the document in edit mode:
HTMLDocument2Ifc.DesignMode := 'On'; //Use 'Off' to switch desingmode off

Setting the body background:
(HTMLDocument2Ifc.body as IHTMLBodyElement).background := AFileName;
HTMLDocument2Ifc.body.style.backgroundRepeat :='no-repeat';

Setting the document for absolute positioning (2-D positioning):
HTMLDocument2Ifc.execCommand('2D-Position', false,true);

Now we can drag the links (wrapped by a span) around on the webpage.

With the execCommand method you can easily do a lot of editing on selected text in the document. To name a few:

HTMLDocument2Ifc.execCommand('Bold', false,0);
HTMLDocument2Ifc.execCommand('Italic', false,0);
HTMLDocument2Ifc.execCommand('FontSize', false, 4); //Set the font size of selected text
HTMLDocument2Ifc.execCommand('InsertImage', true,0); //Use default insert image dialog

There is a lot more, check microsoft MSHTML site for everything.

Another feature of the HTMLDocument2 is that you can get collections of images, links and styles of the webpage. For example you could get all the picture sources as follows:

for i := 0 to HTMLDocument2Ifc.images.length -1 do
begin
Item := HTMLDocument2Ifc.images.item(i, null) as Ihtmlelement;
lbItems.AddItem(Item.getAttribute('src',0) + ' [A Picture]', nil);
end;

Well there is a lot more to explore, but it is easier then you might think at forehand. Here are some links with more resources, to fool around with, on TWebbrowser:

Microsoft MSHTML site
Webbrowser to the max (about.delphi.com)
Brian Cryer TWebbrowser page
MSHTML Editier modus German site with examples.
WebSVN Code examples.