Did you ever require a WYSIWYG HTML-Editor for your desktop application? Well, you could just buy one, but what is the fun of that? Prior to .NET 2.0 developers had to use the Microsoft.mshtml interop assembly in order to include the Internet Explorer's webbrowser control, but now such a control is part of the .NET framework. Please note that all of the following requires Internet Explorer to be installed.
Per default the .NET control is in a "view only" mode. In order to activate the advanced editing features, you just have to write one single line of code.
WebBrowser1.ActiveXInstance.document.designmode = "On"
Well, that's it .... almost. Every editor needs some editing functions such as font, color, alignment, etc. This can be achieved through the control's Document-property, which provides a managed wrapper around Internet Explorer's document object, also known as the HTML Document Object Model (DOM). The next block of code implements a number of editing features by using the execCommand function.
' Toggles the selected text's bold style
WebBrowser1.Document.ExecCommand("Bold", False, Nothing)
' Toggles the selected text's italic style
WebBrowser1.Document.ExecCommand("Italic", False, Nothing)
' Toggles the selected text's underline style
WebBrowser1.Document.ExecCommand("Underline", False, Nothing)
' Sets the selected text's forecolor (note the color translation)
WebBrowser1.Document.ExecCommand("ForeColor", False, System.Drawing.ColorTranslator.ToHtml(System.Drawing.Color.Blue))
' Sets the selected text's size
WebBrowser1.Document.ExecCommand("FontSize", False, 3)
' Sets the selected text's alignment
WebBrowser1.Document.ExecCommand("JustifyLeft", False, Nothing)
WebBrowser1.Document.ExecCommand("JustifyRight", False, Nothing)
WebBrowser1.Document.ExecCommand("JustifyCenter", False, Nothing)
' Pastes the string "Text1" at the selected position
WebBrowser1.Document.ExecCommand("Paste", False, "Text1")
' Inserts a link at the selected position
WebBrowser1.Document.ExecCommand("CreateLink", False, Nothing)
' Inserts an image at the selected position
WebBrowser1.Document.ExecCommand("insertimage", False, "http://upload.wikimedia.org/wikipedia/de/1/1d/Microsoft_.NET_2008_logo.png")Some of the commands such as bold or italic only toggle the selection's style. If you want to find out if the selected text is already bold, you accomplish this by using the queryCommandValue-function.
' Determines if the selected text is bold
Dim isBold as Boolean = WebBrowser1.Document.DomDocument.queryCommandValue("Bold")This is just a small selection of commands, you can find many more on MSDN.
Finally I have created a user control, which implements all of the above. The full source code can be found here.