Winforms HTML Editor control – source code

A lot of people requested the source code, so I put it together in a small VS 2008 solution.

Feel free to download (Link at bottom of post).
Let me know of any problems

Basically what I did is:

  1. I extended this Windows Forms based text editor with HTML output control from Kevin (from codeproject) to use TinyMce as an editor.
  2. With this helpful control  HTML Viewer component from Nikhil
  3. and changed it, see Siag.Seca.WinForms.ServiceBrowser.Controls.Html.HtmlEditor

Reason: We wanted (in our Windows Forms application) to have the same look-and-feel as web users have with the web tinyMce editor.


View Mode (the easy part)

The usercontrol "Siag.Seca.WinForms.ServiceBrowser.Controls.Html.HTMLUserControl" is a wrapper around: "HtmlEditor"
Property HTMLUserControl.TextHtml  = my property from datasource

Edit Mode


  • Subdirectory with tinymce (like on the web) called /tiny_mce
    this folder contains a .html file with the tinymce code
  • TinyEditWithReplace.htm
    that file has a placeholder for the HTML string

Go into Edit Mode

See Siag.Seca.WinForms.ServiceBrowser.Controls.Html.HtmlEditor

Method: cHANGEToolStripMenuItem_Click

using (EditDialog dialogForm = new EditDialog())

        if (dialogForm.ShowDialog() == DialogResult.OK)
            this.TextHtml = dialogForm.TextHtml;



Method: ChangeEditorHtmlText(string htmlTextOnInit)

string absolutePath = Path.GetDirectoryName(Application.ExecutablePath);
    string htmlText = File.ReadAllText(absolutePath + @"TinyEditWithReplace.htm"); // TODO change to use Path.Combine()

    // Now I replace '{ReplaceTEXT}'  with my html string property, and a bit more... :-)
    string filename = Path.GetTempFileName();
    File.WriteAllText(filename, htmlText, Encoding.UTF8);


--> Now the control displays webbrowser.

Inside the webbrower there is tinyMce with the content from my datasource

User can edit the content with TinyMce
--> On OK  Click Handler
i read the string back from webbrowser, tinymce


On how to add an attachment link to the HTML (string) see my blog post...


Screens of my sample app

 Figure: Left side: HTML control in view mode - Right side: Source code of the HTMLEditor


Figure: Clicking on "Edit" brings the control into Edit mode


Figure: Edit mode (WYSIWYG HTML editor )


Figure: Example using databinding the control to a grid with HTML content



More screens can be found here on my older blog entry



tinyMce: Updated to current version 3.2.7

Have a look at the file: \SolutionItems\ValidHtmlText.txt   to configure layout of textarea and tinyMCE  

On Build I have a Post build event that copies the tinyMce files and ValidHTMLtext to the output folder…


REM ---------------
REM IF "$(ConfigurationName)"=="Release" xcopy /Y /E "$(SolutionDir)SolutionItems\tiny_mce" "$(TargetDir)tiny_mce\" -- DON'T COPY whole tinyMCE on all builds
xcopy /Y /E "$(SolutionDir)SolutionItems\tiny_mce" "$(TargetDir)tiny_mce\"

xcopy /Y /E /i "$(SolutionDir)SolutionItems\tiny_mce\TinyEditWithReplace.htm" "$(TargetDir)tiny_mce\"
xcopy /Y /E /i "$(SolutionDir)SolutionItems\ValidHtmlText.txt" $(TargetDir)

REM ---------------

Deployment problems –> see this blog post


disk_blue Download here

arrow_right_blue Please test, let me know of any problems!

arrow_right_blue Free to send suggestions. Make improvements and let me know!


Anonymous said...

kimp mir bekonnt fir :-)

Anonymous said...

Thanks a lot! Exactly what i needed! I will never touch the RichTextBox control again! :-)

Anonymous said...

Hello Peter!
Thank you for the nice job building one project from many and for the nice article.

I am extending an existing .NET application that sends automated emails and my customer wants to edit the email body text template in an editor "outlook style". Since my customer is not ready to pay for a third party control and writing a new e.g. RTF Control from scratch would be cumbersome i started to looking for free alternatives and lucky me after two weeks i found your solution.

There were a couple of additional options that i wanted to have: Text Foreground- and Background Color, Font Size and Font Name, Aligning, etc. I added the buttons and the needed plugins, that was easy since i know tinymce for a while now, the real problem started as i fetched the HTML text via the TextAreaText (BodyText) property of the user control - it deliverd not only the HTML but also garbage - things like all font names and font sizes, new lines, path info if status bar was visible and so on. My solution for this problem was as follows:

I extended the TinyEditWithReplace.htm. Right after the tinyMCE.init { .... }; i added a function:
function GetEditorContent()
return tinyMCE.getInstanceById('txaText').getBody().innerHTML;
and then invoked the function in WinformsUI.Controls.Html.HtmlEditor's TextAreaText instead of BodyText:
public string TextAreaText
String html = this.BodyText;
html = (String)webBrowser1.Document.InvokeScript(@"GetEditorContent");
catch (Exception exception) { }
return html;

I also used the html editor user control directly, because i do not need the edit/view modes and i needed it embedded in a form, not opening it through button or menu in extra dialog/form.

Kind regards,

Anonymous said...

Hi Peter, my customized html editor with the result as a web page looks like this:

Anonymous said...

As a different approach, I implemented an HTML control for Windows Forms from scratch, without depending on any standard browser like IE or Mozilla.

So if you have problems with your IE-based solution, you might like to look at this:

Peter Gfader said...

Hi Anonymous (Christopher)

Nice work! I gave it a quick shot and it works quite nice, although some characters were not displayed properly.

I send you some feedback next days.

Anonymous said...

Hi Peter,
would love to test your code but cannot download it. Seems that shrinkster is down. Is there any chance to get your code from anywhere else?


Peter Gfader said...


Code can be found here

Have fun

Anonymous said...

many thanks, will check it asap


Anonymous said...

Sorry to bother you again.
First of all: Nice work, made me think of replacing the csEXWeb control with tinyMCE.

But: I experienced some strange behaviour.

When editing the Text in the Editor control everything appears to work fine. When clicking the Ok button, the HTML in the textarea "snaps back" to its state before editing - all changes are discarded/ignored. The result html/text didn't change at all.

Maybe you have encountered that behaviour before and have some workaround/fix for that.


Peter Gfader said...


Cool that it was helpful!

I tried it myself and could reproduce your problem...

Didn't happen before though ;-)

I keep you posted!

Peter Gfader said...

Shrinkster is dead. Sad :-(

here is the direct link

Post a Comment

Latest Posts

Popular Posts