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!

Latest Posts

Popular Posts