Search Tools Links Login

Using the WebBrowser Control as an HTML Editor


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.

Original Author: Roderick Thompson, CebraSoft

Code


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 SizeTraditional Point
  Size
18pt
210pt
312pt
414pt
518pt
624pt
736pt



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.


 


 


About this post

Posted: 2003-06-01
By: ArchiveBot
Viewed: 295 times

Categories

Visual Basic 6

Attachments

No attachments for this post


Loading Comments ...

Comments

No comments have been added for this post.

You must be logged in to make a comment.