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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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?
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

When trying to find the cause of a problem in VBA or VB6 it's often valuable to know what procedures were executed prior to the error. You can use the Call Stack for that but it is often inadequate because it may show procedures you aren't intereste…
Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
This lesson covers basic error handling code in Microsoft Excel using VBA. This is the first lesson in a 3-part series that uses code to loop through an Excel spreadsheet in VBA and then fix errors, taking advantage of error handling code. This l…
Suggested Courses
Course of the Month12 days, 18 hours left to enroll

777 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