31

Anyone know of a good free winforms html editor for .NET. Ideally I would like html and preview modes along with the possibility of exporting to a pdf, word doc or similar.

Although the export I could probably create myself from the html output.

Another nice feature would be a paste from word that removes all the extra tags you usually end up with but again it's a nice to have not a required.

PeteT
  • 18,754
  • 26
  • 95
  • 132

6 Answers6

29

You can use the WebBrowser control in design mode with a second WebBrowser control set in view mode.

In order to put the WebBrowser control in design mode, you can use the following code.

This code is a super stripped down version of a WYSIWYG editor for one of our software products.

Simply create a new Form, drop a WebBrowser control on it, and put this in the Form.Load:

Me.WebBrowser1.Navigate("")
Application.DoEvents()
Me.WebBrowser1.Document.OpenNew(False).Write("<html><body><div id=""editable"">Edit this text</div></body></html>")

'turns off document body editing
For Each el As HtmlElement In Me.WebBrowser1.Document.All
    el.SetAttribute("unselectable", "on")
    el.SetAttribute("contenteditable", "false")
Next

'turns on editable div editing
With Me.WebBrowser1.Document.Body.All("editable")
    .SetAttribute("width", Me.Width & "px")
    .SetAttribute("height", "100%")
    .SetAttribute("contenteditable", "true")
End With

'turns on edit mode
Me.WebBrowser1.ActiveXInstance.Document.DesignMode = "On"
'stops right click->Browse View
Me.WebBrowser1.IsWebBrowserContextMenuEnabled = False
Jimi
  • 29,621
  • 8
  • 43
  • 61
Tom Anderson
  • 10,807
  • 3
  • 46
  • 63
  • amazing! answers like this are what SO is all about! – ine Oct 17 '08 at 23:40
  • I have taken that as the basic idea thanks, I am working on extending the functionality more with a toolbar, for fonts, bold, italic... – PeteT Oct 18 '08 at 19:55
  • Thanks for the comments, its a great implementation, the only downside is the code cleaning routines needed to get good xhtml out of it. – Tom Anderson Oct 22 '08 at 02:12
  • And the other downside is of course you need IE installed on the computer. It would be nice to see a resource that doesn't require IE to do this. – JohnC Oct 30 '08 at 22:25
  • 1
    Re: and the other downside is of course you need IE installed on the computer I included this approach in a Click Once WinForm app and I also needed to include a 10 MB COM Interop file so .NET could talk to IE. – Chad May 19 '09 at 03:38
  • Don't forget to turn option explicit off when you run the above code. – Chad May 19 '09 at 03:52
  • I can't say I ever had the issue of having to include the COM interop file. – Tom Anderson May 20 '09 at 16:19
  • 3
    "WebBrowser1.ActiveXInstance.Document.DesignMode" how this should be rewritten in C#? – okutane May 20 '10 at 18:18
  • 2
    if using .Net 4.0 make the ActiveXInstance a dynamic. – Tom Anderson May 20 '10 at 19:18
  • `.ActiveXInstance.GetType().GetProperty("designMode").SetValue(txtHtml.ActiveXInstance, "On", null);` in C# – dtanders Aug 19 '11 at 20:35
11
//CODE in C#
webBrowser1.Navigate("about:blank");
Application.DoEvents();
webBrowser1.Document.OpenNew(false).Write("<html><body><div id=\"editable\">Edit this text</div></body></html>"); 

foreach (HtmlElement el in webBrowser1.Document.All)
{
    el.SetAttribute("unselectable", "on");
    el.SetAttribute("contenteditable", "false");
}

webBrowser1.Document.Body.SetAttribute("width", this.Width.ToString() + "px");    
webBrowser1.Document.Body.SetAttribute("height", "100%");     
webBrowser1.Document.Body.SetAttribute("contenteditable", "true");
webBrowser1.Document.DomDocument.GetType().GetProperty("designMode").SetValue(webBrowser1.Document.DomDocument, "On", null);
webBrowser1.IsWebBrowserContextMenuEnabled = false;
CDS
  • 111
  • 1
  • 2
6

This project seems to be no longer available. Please refer to one of the other answers.

I'm considering using Writer by Lutz Roeder (of Reflector fame). A basic Html editor written completely in C#, provided as-is with source code. Look for it at http://www.lutzroeder.com/dotnet/

Benjamin Wegman
  • 465
  • 4
  • 15
2

SpiceLogic .NET WinForms HTML Editor Control, not free, but it covers everything whatever you are looking for. Especially, Paste from MS word feature is really efficient. Clicking that MS Word Paste button will paste the content from Clipboard to the Editor and clean up the ms word specific tags and generate clean XHTML. If the MS Word contains some images, this editor will detect those images too and the output XHTML will contain the image tag with correct paths for those images.

https://www.spicelogic.com/Products/NET-WinForms-HTML-Editor-Control-8

enter image description here

Emran Hussain
  • 11,551
  • 5
  • 41
  • 48
0

see http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm for an sample HTML edtior that makes use of editing surport in IE.

http://www.mozilla.org/editor/midasdemo/ and http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/contenteditable.htm also works in IE and gives examples of how to do a toolbar, for fonts, bold, italic etc

See these questions for my experience when I tried do so something like this.

I also had lots of other problem, including have to write resize logic in jscript to get the HTML editor to size along with the WinForm form and having to pass the default form/coontrol colours into the HTML editor so that it looked write then users changed colour schemes on Windows.

Therefore if I need to do this again, I would use a 3rd party HTML editor (free or paid for)

Community
  • 1
  • 1
Ian Ringrose
  • 51,220
  • 55
  • 213
  • 317
0

If you just need to simply format some texts, you can find many open source projects on codeproject.com.

I think Netrix's functionality is the most comprehensive in all these free controls. The link as below: https://github.com/joergkrause/netrix

Of course, there are some paid commercial controls, which usually provide a more friendly interface and richer functions, such as this one BaiqiSoft.HtmlEditor. It allows me to merge/unmerge cells, adjust row height and column width for an inserting table.

Hello World
  • 1
  • 1