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";