Using the WebBrowser Control as an HTML Editor

?á

This article is a simple introduction to how you can use
the WebBrowser control as an HTML editor. There are many features available
however there is no sample documentation and what little there is is in C++.

The webbrowser control is added using Project, Components,
Microsoft Internet Controls and appears on the toolbox as a globe icon.



When working with this control it is important to ensure that you initialise it
otherwise you will get Run Time Error 438.

To initialise the control as an editable control enter something like the following:



Private Sub Form_Load

?á?á?á WebBrowser1.Navigate2 "about:blank"

?á?á?á WebBrowser1.Document.DesignMode = "On"

End Sub



Now that you can type into the control, you will more than likely want to enter
rich text ie bold, italic, underline etc.



By using the ExecCommand within the Document model, you can pass through
commands directly into the document.

For example:



Private Sub cmdBold_Click

?á?á?á WebBrowser1.Document.Execcommand "Bold"

End Sub

?á

Basic Commands

In the same way you can see in the example above, the
following commands can be sent straight through to the WebBrowser.



WebBrowser1.Document.Execcommand "JustifyLeft"

WebBrowser1.Document.Execcommand "JustifyCenter"

WebBrowser1.Document.Execcommand "JustifyRight"

WebBrowser1.Document.Execcommand "Bold"

WebBrowser1.Document.Execcommand "Italic"

WebBrowser1.Document.Execcommand "Underline"

WebBrowser1.Document.Execcommand "Copy"

WebBrowser1.Document.Execcommand "Cut"

WebBrowser1.Document.Execcommand "Paste"

WebBrowser1.Document.Execcommand "InsertHorizontalRule"

WebBrowser1.Document.Execcommand
"Indent"

WebBrowser1.Document.Execcommand
"Outdent"

?á

Commands with Parameters

Font Size



When looking to modify the font properties, parameters will need to be
specified.



In the case of setting Font Size you need to use HTML sizes rather than point
sizes as follows:

In converting the font sizes to a value between 1 and 7,
the command is as follows (note the size is passed across as a string, not a
number):

WebBrowser1.Document.Execcommand "FontSize",
"", "5"





Font Color



In the same way we had to use the HTML value for size rather than the windows
value, so too do we have to do the same for colors. We cannot use the Windows
long values and need to convert to the web format of RGB.



I have modified a function from PlanetSourceCode that does the job although I
suspect there is a far easier way of using it!



Public Function GetHexColor(theColor As Long) as String

?á?á?á Dim Red As Integer, Green As Integer, Blue As Integer



?á?á?á Red = theColor Mod &H100: theColor = theColor &H100

?á?á?á Green = theColor Mod &H100: theColor = theColor &H100

?á?á?á Blue = theColor Mod &H100



?á?á?á If Len(Hex(Red)) = 1 Then GetHEXColor = GetHEXColor & "0"

?á?á?á GetHEXColor = GetHEXColor & Hex(Red)

?á?á?á If Len(Hex(Green)) = 1 Then GetHEXColor = GetHEXColor & "0"

?á?á?á GetHEXColor = GetHEXColor & Hex(Green)

?á?á?á If Len(Hex(Blue)) = 1 Then GetHEXColor = GetHEXColor & "0"

?á?á?á GetHEXColor = GetHEXColor & Hex(Blue)

?á?á?á GetHEXColor = "#" & GetHEXColor

End Function



This function allows you to take colors from
the Command Dialog control and convert to web based colors. A simple
implementation would be as follows (taking note the format of the data passed
through to the command ie #RRGGBB):

On Error Resume Next

CommonDialog1.CancelError = True

CommonDialog1.ShowColor

If err.Number = 0 Then

?á?á?á HexColor = GetHexColor(CommonDialog1.Color)

?á?á?á WebBrowser1.Document.Execcommand "ForeColor", "", HexColor

End If

On Error Goto 0

Font Name



As with the previous examples, the font name is exactly the same as the other
methods where the name of the font is passed as a string:

WebBrowser1.Document.Execcommand "FontName",
"", "Arial"

?á

Reading and Writing to/from the Control



In 99% of cases, the VB programmer using the
WebBrowser control writes the data to a temp file and then loads that file into
the control. Now that we know about the Design Mode, we can write data directly
to the control.

WebBrowser1.Document.Script.Document.Clear

WebBrowser1.Document.Script.Document.Write "Hello World"

WebBrowser1.Document.Script.Document.Close

If we want to get the data back we use a rather obscure
method:

strHTMLData = WebBrowser1.Document.All(0).InnerHTML

?á

Conclusion

It was not my intention to write a definitive guide on how
to do this but rather to provide an overview and encourage other programmers to
take this further. This is a very powerful feature that is so simple to use yet very little is available in VB.

?á

?á