Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Will get 250 more points!-Source code Preservation and the Webbrowser control

Posted on 2003-03-13
Medium Priority
Last Modified: 2013-12-26
I want to make both a WYSIWYG editor and a text based
html editor.

1.How do i do Source Code Preservation for the Webbrowser control. I set the
webbrowser1.document.write editbox.text

How do i put the webbrowser1 document source code to the
editbox with source code preservation (it means it will
keep spaces ,lowercase,uppercase etc.)

If there is no way then i thought the following thing
a.Add a the tag with the webbrowser1 execute command
b.Get the sourceindex of the tag that was inserted
c.Run a routine with input from editbox.text that will
get the position of the source.index-1 tag.
d.Paste correct html that i will have to set manually.

What do you think of this?

2. Is there way to alter grid lines of html tables on design mode with the webbrowser1 control ?
Question by:alexr123
  • 3
  • 2
  • 2

Expert Comment

ID: 8127966
for your first Q, how about:

editbox.text = WebBrowser1.Document.DocumentElement.innerHTML

Author Comment

ID: 8134811
what about the second one though?

Expert Comment

ID: 8136160
Well, if you mean design mode of VB IDE, then you cannot even visualize an HTML inside the WebBrowser control, so I would assume you are talking about 'edition mode' in your WYSIWYG editor.
In that case, what I would recommend is that you keep a temporary copy of the HTML, where you can make changes. If the user wants to change grid lines, you can internally modify the HTM and reload it in the WebBrowser.

For example, you could programmatically replace <TABLE border=0> with <TABLE border=10>, write to the temporary HTM and then use a WebBrowser1.Refresh

Did the suggestion for the first Q worked?
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 8142470
please answer me this to get the points.
how will i know which element of the page is being selected
when the user clicks on an element in the webbrowser WYSIWYG mode.

You have a webbrowser control in WYSIWYG mode and a textbox
containing the html code the user is writing.
1.You set the webbrowser document to the textbox text
2.You select a table cell in the WYSIWYG webbrowser control

The question is how do you know which part of the original html(textbox text) is beign selected.
I do not mean .selection.create etc. for the webbrowser
I mean which part of the ORIGINAL source which has all
uppercase/lowercase and spaces is being selected.


Expert Comment

ID: 8152121
sorry man, dunno how to do that...

Expert Comment

ID: 8241627
Let me see if I've got this right: You want a Webbrowser in design mode and a textbox on your form. The textbox shows the HTML that produced the display in the webbrowser. Whenever the user updates either, the modifications will be reflected in the other. (This much is easy. See http://www.experts-exchange.com/Programming/Programming_Languages/Visual_Basic/Q_20495863.html ) But you also want the user to be able to select text in the webbrowser and for this to be highlighted/selected in the textbox. Is this correct?

Kindest regards,

Accepted Solution

Rhaedes earned 200 total points
ID: 8245730
Maybe this is what you need.
Put a webbrowser (Webbrowser1) and a RTB (RichTextBox1) on a form. Add 2 command buttons (Command1 and Command2), and reference the HTML Object library. Paste the code below.

It works like this: Whenever the user types into the Webbrowser the HTML appears in the RTB. And whenever the user type into the RTB the WB modifies it display accordingly.
Command1 inserts a table at the position of the caret in either control (WB or RTB). The user can select the table (by clicking the top right corner) and adjust its dimensions with the mouse. The adjustments appear immediately in the source code view in the RTB. When the user selects a table in this manner an attribute is set (NowSelected) for that table, and of course appears in the RTB. That way you 'know' which table has been selected.
Command2 is an example of how VB can look through the DOM to find the table with the 'NowSelected' attribute, and change the other attributes of that element (border etc).

Kindest regards,

Private WithEvents HDoc As HTMLDocument
Dim CurrentControlIsBrowser As Boolean

Private Sub Command1_Click() 'Insert a table
On Error GoTo errhand

'User can input these values in a form
'I have hard-coded them here for simplicity
myRows = 3
myColumns = 2

'Create the html for the Table
For aRow = 1 To myRows
myTd = myTd + "<td>&nbsp;</td>"
Next aRow

myTd = "<tr>" & myTd & "</tr>"

For aColumn = 1 To myColumns
myHTML = myHTML + myTd
Next aColumn

myTable = "<table border=""1"" cellspacing=""0"" cellpadding=""0"">" & myHTML & "</table>"

'Now see where to do the modifications first:
'in the WB or in the RTB
If CurrentControlIsBrowser = True Then

'Put in a marker momentarily in the WB
Set r = HDoc.selection.createRange

'Send the update to the RTB

'Replace the marker with a the HTML for the table
RichTextBox1.Text = Replace(RichTextBox1.Text, "{TABLEGOESHERE}", myTable)

Else 'Focus was on RTB, so just insert text
RichTextBox1.SelText = myTable

End If

RTB_2_WB 'Send the HTML in the RTB to the Webbrowser
WB_2_RTB 'This is useful since it adds TBODY and cleans up etc.

End Sub

Private Sub Command2_Click()
'This is an example of how to use the DOM to change attributes

On Error Resume Next

For tables = 0 To HDoc.All.tags("TABLE").length - 1
Set r = HDoc.All.tags("TABLE").Item(tables)
 If r.getAttribute("NowSelected") = "TRUE" Then
'Set the attributes in the following way:
  m = r.setAttribute("border", "6")
  m = r.setAttribute("cellSpacing", "5")
 End If
Next tables

End Sub

Private Sub Form_Load()
WebBrowser1.Navigate2 ("about:blank")
WebBrowser1.Document.designMode = "On"
Set HDoc = WebBrowser1.Document
End Sub

Private Sub HDoc_onkeyup()
CurrentControlIsBrowser = True
End Sub

Private Sub HDoc_onmouseup()
CurrentControlIsBrowser = True
On Error GoTo errhand 'in case selection is not a control (a table)

Set s = HDoc.selection.createRange 'Create a range for the selected table

'Remove all other markers
For element = 0 To HDoc.All.tags("TABLE").length - 1
m = HDoc.All.tags("TABLE").Item(element).removeAttribute("NowSelected")
Next element

'Add the NowSelected attribute
m = s.Item(0).setAttribute("NowSelected", "TRUE")


Exit Sub

'MsgBox "No table selected"

End Sub

Private Sub RichTextBox1_KeyUp(KeyCode As Integer, Shift As Integer)
CurrentControlIsBrowser = False
End Sub

Private Sub WB_2_RTB()
RichTextBox1.Text = HDoc.All(0).outerHTML
End Sub

Private Sub RTB_2_WB()
WebBrowser1.Document.write RichTextBox1.Text
End Sub

Private Sub RichTextBox1_MouseUp(Button As Integer, Shift As Integer, x As Single, y As Single)
CurrentControlIsBrowser = False
End Sub

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When designing a form there are several BorderStyles to choose from, all of which can be classified as either 'Fixed' or 'Sizable' and I'd guess that 'Fixed Single' or one of the other fixed types is the most popular choice. I assume it's the most p…
Enums (shorthand for ‘enumerations’) are not often used by programmers but they can be quite valuable when they are.  What are they? An Enum is just a type of variable like a string or an Integer, but in this case one that you create that contains…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question