Simple HTML editor using C# WebBrowser Control

The WebBrowser control shipped with C# 2005 can be used for creating a simple HTML editor.

To start with, we need to turn on the design mode for the control. To do this, we need to get a reference to the IHTMLDocument2 object. The snippet given below can be used to turn on the design mode. Before than, we need to add a reference to Microsoft.mshtml.

mshtml.IHTMLDocument2 htmlDoc = webBrowser.Document.DomDocument as mshtml.IHTMLDocument2;
htmlDoc.designMode = "On";

We can access the HTML for the displayed content by using the InnerHtml property, as shown below. The same property can also be used to set the HTML content.

string html = webBrowser.Document.Body.InnerHtml;

It may be necessary to display a custom context menu in the Web browser, when the user right clicks on it. It is easy to hook a custom menu to the Web browser control. Code snippet is given below;

webBrowser.Document.ContextMenuShowing += new HtmlElementEventHandler(this.Browser_ContextMenuShowing);

The signature for the Browser_ContextMenuShowing function is given below. We can design a ContextMenuStrip and use the Show() as shown.

private void Browser_ContextMenuShowing(object sender, HtmlElementEventArgs e)
{
    e.ReturnValue = false;

    // Code to display the context menu
    contextMenu.Show(this, e.ClientMousePosition);
}

Basic editing operations such as Cut, Copy etc. can be carried out by invoking the ExecCommand() of the underlying HtmlDocument object, as shown below.

webBrowser.Document.ExecCommand("Copy", false, null);

The ExecCommand() accepts three parameters. The command name, show GUI parameter and the values for the command. A detailed list of commands is given below.

Cut, Copy, Paste, SelectAll, Undo, Redo, Bold, Italic, Underline, FontName, FontSize, RemoveFormat, JustifyLeft, JustifyCenter, JustifyRight, JustifyFull, ForeColor, BackColor, InsertOrderedList, InsertUnorderedList, InsertImage, CreateLink, InsertParagraph, InsertHorizontalRule, Indent, Outdent

The show GUI parameter is set true, if the command has to display a GUI (already built into the WebBrowser control). InsertImage is a command which can display GUI, if this field is set to true. The last parameter is used to specify the values. Eg; ForeColor & BackColor commands expect the value to be with the command. The below given snippet shows how to set the foreground color selected by the user.

using (ColorDialog dlgColor = new ColorDialog())
{
    if (dlgColor.ShowDialog() == DialogResult.OK)
    {
        string colorstr = string.Format("#{0:X2}{1:X2}{2:X2}", dlgColor.Color.R, dlgColor.Color.G, dlgColor.Color.B);
        webBrowser.Document.ExecCommand("ForeColor", false, colorstr);
    }
}

The queryCommandValue() of the IHTMLDocument2 object can be used to get the value of a setting, which is already set. Examples are given below.

bool isBold = (bool)htmlDoc.queryCommandValue("Bold");
string fontName = htmlDoc.queryCommandValue("FontName").ToString();
int fontSize = int.Parse(htmlDoc.queryCommandValue("FontSize").ToString());

Couple of points about setting the font. First, we need to remove the current formatting by executing the RemoveFormat command. Another important thing is; the font sizes are fixed - like 0, 8, 10, 12, 14, 16, 20 & 24. The application should have logic for conversion to these values, if a Font dialog box is used for setting the font.