Editing HTML with a WYSIWYG Editor

Question

I have a datagridview with HTML strings. Using a CellDoubleClick event, I am displaying the html string in a WebBrowser control.

In Form1

private void dataGridView1_CellDoubleClick(object sender, DataGridViewCellEventArgs e)
{
    try
    {
        if (e.ColumnIndex != 0 && e.RowIndex != -1)
        {
            string s = dataGridView1.Rows[e.RowIndex].Cells[e.ColumnIndex].Value.ToString();
            this.f2 = new Form2(s);
            f2.ShowDialog();
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message, "ERROR", MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
}

In Form2

private IHTMLDocument2 doc;
string reply;

public Form2(string reply)
{
    InitializeComponent();
    this.reply = reply;
}

private void Form2_Load(object sender, EventArgs e)
{
    webBrowser1.DocumentText = reply; <--- string from DataGridView

    IHTMLTxtRange range = doc.selection.createRange() as IHTMLTxtRange;
    range.pasteHTML(webBrowser1.DocumentText);
    range.collapse(false);
    range.select();

    doc = webBrowser1.Document.DomDocument as IHTMLDocument2;
    doc.designMode = "On";
}

Using the above code, I can successfully display the HTML string as a plaintext, however I am unable to edit it. Alternatively, if I use this code:

private IHTMLDocument2 doc;
private void Form2_Load(object sender, EventArgs e)
{
    webBrowser1.DocumentText = reply; <--- string from DataGridView

    doc = webBrowser1.Document.DomDocument as IHTMLDocument2;
    doc.designMode = "On";

    IHTMLTxtRange range = doc.selection.createRange() as IHTMLTxtRange;
    range.pasteHTML(webBrowser1.DocumentText);
    range.collapse(false);
    range.select();
}

It will be a blank form, but I will be able to write to it.

I have a feeling it has to do with range.pasteHTML(webBrowser1.DocumentText); being in the Form2_Load method, but I'm unaware of any other method that will allow me to display the HTML string from the DataGridView upon opening Form2.

I want to allow users to be able to edit the HTML string as plaintext (after which it will be converted back to HTML and displayed in the datagridview).

Answer 1

Its possible! You can edit HTML using the default WebBrowser control,

1. Add a reference to the "Microsoft.mshtml.dll" file, available here.

2. Assuming your WebBrowser is named "browser", add this code in the Form.Load event (browser.Document.DomDocument as mshtml.IHTMLDocument2).designMode = "On";

3. Call the following functions to format the selected text:

---

browser.document.ExecCommand("Bold", false, null);
browser.document.ExecCommand("Underline", false, null);
browser.document.ExecCommand("Italics", false, null);
browser.document.ExecCommand("StrikeThrough", false, null);
browser.document.ExecCommand("FontName", false, "Times New Roman");
browser.document.ExecCommand("FontName", false, "Arial");
browser.document.ExecCommand("FontName", false, "etc.");
browser.document.ExecCommand("FontSize", false, "1");
browser.document.ExecCommand("FontSize", false, "2");
browser.document.ExecCommand("FontSize", false, "3");
browser.document.ExecCommand("InsertUnorderedList", false, null);
browser.document.ExecCommand("InsertOrderedList", false, null);
browser.document.ExecCommand("Cut", false, null);
browser.document.ExecCommand("Copy", false, null);
browser.document.ExecCommand("Paste", false, null);
browser.document.ExecCommand("CreateLink", true, null);

---

The WebBrowser control does not allow editing, and is designed to view web pages only. Its actually the Internet Explorer/Trident rendering engine operating behind the scenes that parses the HTML and renders the final page complete with DOM/JS support. No popular browser supports editing of HTML pages, IMO, and neither does IE.