HTML Editor in a Windows Forms Application [closed]

Question

We are looking for a WYSIWYG editor control for our windows application (vb.net or c#) so that users can design HTML emails (to send using the SMTP objects in the dot net framework) before sending.

Currently all the available editors we can find have one of the following issues:

1. They rely on mshtml.dll or the web browser control which as proven for us to be unreliable as the HTML code and the editor get out of sync under windows 2000 (IE6)

2. They are web-based, not a windows form control

3. They place styles in the head of the document (see note below)

Unfortunately, as this HTML email article descries the only sure way of making HTML emails to work with styles is to use them inline which now seems to be unsupported in many editors.

Does anyone have any experience in this or could suggest a solution?

Answer 1

I've been using this one, which goes a little lower than the WebBrowser, but still uses MSHTML, which does spit out some ugly HTML. For my purposes, I am doing a multi-tabbed editor with WYSIWYG and HTML edit mode (using ICSharp.TextEditor) with a Buffer class to update whenever tabs change. As part of that Buffer class, I actually run the HTML through HTML Tidy and a few scrub-n-replace bits to get valid XHTML.

I only offer that as a solution because I, too, failed to find one that wasn't derived from MSHTML in some way and eventually just went ahead with the above solution to keep moving forward.

Answer 2

The simplest HTML editor in Windows Forms could be showing a <div contenteditable="true"></div> in a WebBrowser control. It has built in support for common html text editing features like:

• Ctrl+B to make the selection bold
• Ctrl+I to make the selection italic
• Ctrl+U to make the selection underlined
• Ctrl+A to select all text
• Ctrl+C to copy selection
• Ctrl+X to cut selection
• Ctrl+V to paste the selection
• Ctrl+K to insert a link

However for a better user experience you can rely on DOM document object in WebBrower and use its execCommand method and easily run commands like Bold, Italic, Underline, InsertOrderedList, InsertUnorderedList, InsertImage, FormatBlock, ForeColor, BackColor, and etc.

For example the following command inserts ordered list:

webBrowser1.Document.ExecCommand("InsertOrderedList", false, null);

Examlpe - Windows Forms HTML Editor

Here I will share an example for a C# application and will show you easily you can implement an HTML editor.

public class HtmlEditor
{
    WebBrowser webBrowser;
    private dynamic doc;
    private dynamic contentDiv;
    public HtmlEditor(WebBrowser webBrowserControl, string htmlContent)
    {
        webBrowser = webBrowserControl;
        webBrowser.DocumentText = @"<div contenteditable=""true""></div>";
        webBrowser.DocumentCompleted += (s, e) =>
        {
            doc = webBrowser.Document.DomDocument;
            contentDiv = doc.getElementsByTagName("div")[0];
            contentDiv.innerHtml = htmlContent;
        };
    }
    public string HtmlContent => contentDiv.InnerHtml;
    public void Bold() { doc.execCommand("bold", false, null); }
    public void Italic() { doc.execCommand("italic", false, null); }
    public void Underline() { doc.execCommand("underline", false, null); }
    public void OrderedList() { doc.execCommand("insertOrderedList", false, null); }
    public void UnorderedList() { doc.execCommand("insertUnOrderedList", false, null); }
    public void ForeColor(Color color)
    {
        doc.execCommand("foreColor", false, ColorTranslator.ToHtml(color));
    }
    public void BackColor(Color color)
    {
        doc.execCommand("backColor", false, ColorTranslator.ToHtml(color));
    }
    public void InsertImage(Image image)
    {
        var bytes = (byte[])new ImageConverter().ConvertTo(image, typeof(byte[]));
        var src = $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
        doc.execCommand("insertImage", false, src);
    }
    public void Heading(Headings heading)
    {
        doc.execCommand("formatBlock", false, $"<{heading}>");
    }
    public enum Headings { H1, H2, H3, H4, H5, H6 }
}

To use this HTML Editor class, it's enough to have a WebBrowser control on a Form and initialize the editor this way:

HtmlEditor editor;
private void Form1_Load(object sender, EventArgs e)
{
    var html = @"Some html content";
    editor = new HtmlEditor(webBrowser1, html);
}

Then you can use a ToolStrip to show available commands and run the commands. For example:

private void OrderedListButton_Click(object sender, EventArgs e)
{
    editor.OrderedList();
}

private void ImageButton_Click(object sender, EventArgs e)
{
    using (var ofd = new OpenFileDialog())
    {
        ofd.Filter = "Image files|*.png;*.jpg;*.gif;*.jpeg;*.bmp";
        if (ofd.ShowDialog() == DialogResult.OK)
        {
            using (var image = Image.FromFile(ofd.FileName))
            {
                editor.InsertImage(image);
            }
        }
    }
}