A WYSIWYG editor

4.2.7 A WYSIWYG editor

WYSIWYG (what you see is what you get) is a term used to describe Web and graphics editors that enable you to naturally manipulate graphical out- put, without having to be concerned with the underlying code. This feature is a handy way to let users be more creative in the type of textual messages or documents they create, without requiring them to take a crash course in HTML.

Internet Explorer can run in a special design mode, which is acceptable as a WYSIWYG editor. The trick to accessing design mode in Internet Explorer is simply to set the property WebBrowser.Document.designMode to On . Users can type directly into the Internet Explorer window and use well- known shortcut keys to format text (e.g., Ctrl + B, Bold; Ctrl + I, Italic; Ctrl + U, Underline). By right-clicking on Internet Explorer in design mode, a user can include images, add hyperlinks, and switch to browser mode. When an image is included in the design view, it can be moved and scaled by clicking and dragging on the edge of the image.

More advanced features can be accessed via Internet Explorer’s execCommand function. Only FontName , FontSize , and ForeColor are used in the following sample program, but here is a list of the commands used by Internet Explorer.

Chapter 4

106 4.2 HTTP

Table 4.6 Parameters of Internet Explorer’s execCommand function .

Command

Meaning

Bold Inserts a <B> tag in HTML Copy

Copies text into the clipboard Paste

Pastes text from the clipboard InsertUnorderedList

Creates a bulleted list, <UL> in HTML Indent

Tabulates text farther right on the page Outdent

Retabulates text left on the page Italic

Inserts an <I> tag in HTML Underline

Inserts an <U> tag in HTML CreateLink

Creates a hyperlink to another Web page UnLink

Removes a hyperlink from text FontName

Sets the font family of a piece of text FontSize

Sets the font size of a piece of text CreateBookmark

Creates a bookmark on a piece of text ForeColor

Sets the color of the selected text SelectAll

Is equivalent to pressing CTRL + A JustifyLeft

Moves all text as far left as space allows JustifyRight

Moves all text as far right as space allows JustifyCenter

Moves all selected text as close to the center as possible SaveAs

Saves the page to disk

Other functionality not included in this list can be implemented by dynamically modifying the underlying HTML.

To start coding this application, open a new project in Visual Studio .NET. Add a reference to Microsoft.mshtml by clicking Project→ → → →Add Ref- erence. Scroll down the list until you find Microsoft.mshtml , highlight it, and press OK. If you have not already done so from Chapter 1’s example, add Internet Explorer to the toolbox. To do this, right-click on the toolbox and select Customize Toolbox. Scroll down the list under the COM com- ponents tab until you see Microsoft Web Browser. Check the box opposite it, and press OK.

4.2 HTTP 107

Draw a Tab control on the form named tabControl . Click on the tabPages property in the properties window and add two tab pages, labeled Preview and HTML. Draw the Microsoft Web Browser control onto the preview tab page and name the control WebBrowser . Add three buttons to the Preview tab page, named btnViewHTML , btnFont , and btnColor . In the HTML tab page, add a textbox named tbHTML , and set its multiline prop- erty to true . Also add a button to the HTML tab page named btnPreview . Drag a Color Dialog control onto the form, and name it colorDialog . Drag a Font Dialog control onto the form and name it fontDialog .

Double-click on the form, and add the following code:

C#

private void Form1_Load(object sender, System.EventArgs e) {

object any = null; object url = "about:blank"; WebBrowser.Navigate2(ref url,ref any,ref any,ref any,ref

any); Application.DoEvents(); ((HTMLDocument)WebBrowser.Document).designMode="On";