The HTMLEditor project is the simplest HfML editor you can imagine. It consists of two panes, which can be resized at runtime with the mouse (see Figure 21.11) The upper pane is a RichTextBox control; where you can enter HfML code. The lower pane is a WebBrowser control, where the HTML code is rendered. The HTMLEditor project (you’ll find it in the HTMLEdit folder on the CD) is ideal for experimenting with HfML. There are many WYSIWYGI·rilvIL editors around, but in order to get exactly what you want, you must tweak the source HTML code HTMLEditor combines the operations of HTML editing and rendering in the same window.
I could have used a simple Text80x control for editing the HTML source code, but instead I used the RichTextBox control because its built-in features simplify the implementation of many custom editing features. It even allows the use of different colors for HTML tags or lets you convert them to uppercase. The HTMLEditor can handle every document you could normally display in Internet Explorer, thanks to the WebBrowser control. The upper half of the Form is a simple editor. No HTML specific features were added to this editor, just the built-in editing features of the RichTextBox control. The Edit menu, which is also implemented as a context menu, contains the usual editing commands (Copy, Cut, Clear, Paste, and Select All) plus the Render Document command, which renders the current document on the WebBrowser control.To access the document displayed in the WebBrowser control, you must first access the Script object of the WebBrowser control’s Document property. If you wanted to clear the current document from within a script, you should have used the expression Window.Document.Clear. To clear the contents of the WebBrowser control from within your VB application, you use the following expression: WebBrowserl.Document.script.Document.Clear The Script object of the WebBrowser’s Document property lets you access the document displayed on the control and manipulate it from within your VB code. But there’s a catch here. This expression will work only if, the moment it’s called, a document is already displayed. When the HTMLPad application starts, it loads the document Empty.hbn, which it expects to find in the current folder. The ” of the Rendei’ Document command is Shown next:
The RenderDocumentO subroutine is a short procedure that clearsfhe con of the WebBrowser control, opens the document, and then writes to it the H1M code of the RichTextBox control with the Document object’s Write method. Now that you know how to manipulate the document displayed on the Web- Browser control, you can access any page displayed on the centrol through you VBcode. For example, you can use the Links array of the Scripting Model to as the hyperlinks the document, ex~e which ones are Images, and start anoth process to download them in the background. Or you can write an application downloads a Web page and all the documents on the same Web that are referenc on the home page via hyperlinks,
Resizing the HTMLEditor Window
The HIMLEditor application wouldn’t be nearly as functional if you couldn’t resiits panes. When you’re working with the HTML code, you need a large editor win. dow. When you view the rendered document, you want to view as much of the document as possible. The code for t’eSizing theapplication’s window and its PaI!es ha nothing to do with the topics covered in this chapter, but because this is such an important feature of the application, I will discuss the code briefly.
First, you must provide the code that resizes and arranges the two controls on the Form. The HfMLEditor Form’s Resize event is shown next
Another feature of the HTMLEditor application is that the stripe between the two controls acts as Iimovable bar that lets you, change the heights of the editor
and browser’s areas. This allows you to give more space to one of them, depending on in which one you’re working. To move the bar up or down. place the pointer over the stripe and press the left button. When the pointer turN in a double arrow, move the bar to the desired position, and then release the button. To implement this feature, you must program the Form’s mouse events. When the mouse is first pressed, the code changes the mouse pointer and saves the Y coordinate of the mouse to a Form variable, DragStartY. The ResizeWindows variable is also set to True to indicate that the two sections of the Form can be resized from within the MouseMove event. Here is the handler of the Form’s Mouse- ‘Down event:
