Home » Programming » WYSIWYG HTML Editor in .NET WPF, Windows Forms, VB6 in Web Browser

WYSIWYG HTML Editor in .NET WPF, Windows Forms, VB6 in Web Browser

February 4th, 2011 Leave a comment Go to comments

I’ve spent a fair bit of time looking for a decent HTML Editor control for a variety of platforms… The platforms on which I needed a decent HTML Editor included Visual Basic 6, .NET Windows Forms and now .NET WPF.  The problem is there is no decent native HTML Editor control for any of these, but what’s worse is there aren’t any good third party controls either, so the only option is really to create your own.

Firstly I needed a HTML Editor for VB6.  The option that most people seem to suggest is to use the DHTMLEdit OCX which has now been retired but can still be deployed and then call various methods on it to do the editing.  You can do something similar with the MSHTML control, but once again it’s quite ugly.  I spent some time searching for a better control and found nBit HTML Editor ActiveX Control but after using it for some time found that it produces SUPER UGLY non standards compliant HTML (i.e. 90s style).  Given that my content is going onto an XHTML page that is not an option.  The control is quite nice in terms of function, but is quite restrictive in what you can do and the ugly HTML is a deal breaker.  I didn’t really want to spend heaps of time on implementing all the buttons in DHTMLEdit or the MSHTML by calling execCommand.  A frequently referred to post for implementing a Windows Forms HTML Editor was also not of much use as it is very basic and doesn’t fit my needs.   Another post on Code Project called WYSIWYG HTML Editor was also not of much use as it didn’t do it how I wanted it.

My initial idea before I began my search was to actually use a WebBrowser control with one of the well established OpenSource HTML Editors like TinyMCE, CKEditor or FCKEditor (now superseded by CKEditor), so I thought I’d see what I can find.  I found an article on CodeProject again where someone has implemented TinyMCE HTML Editor in .NET WindowsForms which was pretty close to what i was looking for.  I did a bit more searching and also found a blog post where a fella has done the same with FCKEditor, titled TinyMCE HTML Editor running in Windows Forms and another one called FCKEditor HTML Editor Running on Desktop.  Between all these posts (and the sample code) I pretty much worked out that this is going to be by far the best way to do this.  Some people on various forms and on StackOverflow had taken issue with using the WebBrowser Control in both Windows Forms and WPF as it’s just a wrapper for the COM WebBrowser and they would prefer a native control, but I say who cares, you just need something that works how you want it from a functional perspective and doesn’t take heaps and heaps of code.

I then did a bit more searching to find out how I can avoid any security issues coming up and found a post about WebBrowser in WPF.  That showed how to avoid a warning by adding some code to the HTML page.

So putting all of this together I managed to easily implement a WYSIWYG HTML Editor on all of the platforms being VB6, Windows Forms and WPF.  What you need to do is actually rather simple, with a few specialty tweaks for each platform:

  1. Download the WYSIWYG HTML Editor of your choice (i.e. TinyMCE, CKEditor, FCKEditor or some other) and put into your project directory
  2. Create a HTML file that will host the control.  This file has the page that will be loaded in the WebBrowser and provides stuff like initialisation for the control as well as simple getter and setter methods.  Make sure to add the stuff at the start of your file to stop the security warning coming up. (i.e. <!– saved from url=(0014)about:internet –>)
  3. Put a WebBrowser control in your window and in the Load (or Loaded) event use the Navigate function of the WebBrowser to open your file.  You can also use the Source or Url Property in WPF and WindowsForms respectively.
  4. When you run the project your WebBrowser should show now.
  5. Next thing is to be able to get and set the contents.
  6. In WPF and WindowsForms you can just use InvokeScript to call the JavaScript methods created in Step 2 to get and set the content of the control.  In VB6 the execScript method doesn’t work quite as well so can’t return a value.  To work around that all you do is add a textarea in a hidden div and use the DOM to access that value and then have your getter and setter javascript methods which you call using execScript get and set the values from the textarea, which you interact with via the DOM using WebBrowser.Document.getElementById(‘htmlArea’).value.

That’s pretty much all you need to implement a fully functional HTML Editor.  You can of course do stuff like implement a user control or a custom control in WPF and WindowsForms to reuse the web browser easily.  You can pass in the configuration and so on from the code and you can even write out the HTML from the code so you don’t need the HTML file.  Whichever way you do it is up to you, but this should certainly give you an idea of how to get the basics working, which is the critical part.

Share
Categories: Programming Tags:
  1. Foetalstalk
    January 27th, 2012 at 14:00 | #1

    Is there any chance you can provide a sample app (source code) for this?

    Thanks,

    ..

  2. January 29th, 2012 at 23:15 | #2

    I’ll get around to it at some stage, but it’s actually very easy… just get CKEditor to be displayed in a WebBrowser control. I’ve been using this solution for a few months now and it’s awesome, does everything I want it to do and more, because I can use the whole of CKEditor features with the exception of CKFinder (or equivalent) integration.

  3. xitnig
    March 26th, 2012 at 22:40 | #3

    Hello!

    this description is exactly what i need! thx for it! very good!
    anyway.. do u have an example code?
    could u send me it at email?
    would be very nice!
    Thank u!

  4. March 28th, 2012 at 23:32 | #4

    I have code, but don’t have time. It’s actually really easy to implement, might put the code up one day when I have some time.

  1. No trackbacks yet.


6 − = two