HTML Editor in a Windows Forms Application

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

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);
            }
        }
    }
}

Answer 2

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 3

I also needed a WYSIWYG editor for a Windows Forms project that I was working on. I wrote about the items that I found here. Eventually, I ended up using something that I found on CodeProject: A Windows Forms based text editor with HTML output. This does violate (a) above in that it uses the WebBrowser control. However, I couldn't find anything good that didn't do this (if you don't use the WebBrowser in some way, then you basically have to write your own HTML parser and renderer in order to handle the "What-You-See" part of WYSIWYG). The good thing about this control is that the source is easily customizable, so you can take away and add formatting options as you need (and if you want the styles to all be in-line, you can do this as well).

Answer 4

It's my first contribution.

You can use a RichTextBox. The RTF format is more than enough to create emails.

I recently wrote about how to load and save to hard disk, the contents of a RichTextBox.

Allows Copy and Paste. It's simple to use and with few buttons you can create your own commands.

With RichTextBox1 
    .SelStart = 0 
    .SelLength = Len (. Text) 
    .SelColor = vbRed
End With

Example for loading and saving.

http://danielcatala.wordpress.com/2014/01/30/como-cargar-y-guardar-archivos-richtext-con-wpf/

Private Sub btnCarga(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click

    Dim archivoCarga As New StreamReader("prueba.rtf")
    With RichTextBox1
        .Selection.Select(.Document.ContentStart, RichTextBox1.Document.ContentEnd)
        .Selection.Load(archivoCarga.BaseStream, System.Windows.DataFormats.Rtf)
    End With
End Sub

Private Sub btnGuarda(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click

    Dim archivoSalida As New StreamWriter("prueba.rtf")
    Dim bs As Stream = archivoSalida.BaseStream

    With RichTextBox1
        .Selection.Select(RichTextBox1.Document.ContentStart,     RichTextBox1.Document.ContentEnd)
        .Selection.Save(bs, System.Windows.DataFormats.Rtf)
    End With
End Sub

Answer 5

Instead of searching for an HTML editor, consider the option of a RichText editor (which can be much easier to create) and then convert the final text into a HTML document.

Provided you are required to use a minimal set of features (bold / italics etc) both the creation of the RT editor and the conversion of the final document into HTML format shouldn't be hard.

If, on the other hand, you need to use more features (such as tables), you need to study the Rich Text Format and implement the features you need.

Additional resources:

• Converting RTF to HTML: http://www.codeproject.com/KB/vb/RTFToHTML.aspx
• RichTextBox tips and tricks: http://www.vbforums.com/showthread.php?t=355994