Whether it be creating your own mail client or HTML editor, the WebBrowser control contains a lot more functionality than first appears. With a few simple tricks the WebBrowser control can be turned into a fully featured editor.
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:
| HTML Size |
Traditional Point
Size |
| 1 |
8pt |
| 2 |
10pt |
| 3 |
12pt |
| 4 |
14pt |
| 5 |
18pt |
| 6 |
24pt |
| 7 |
36pt |
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.
(15(15 Vote))