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

Prerequisites

• 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())
    {
        dialogForm.ChangeEditorHtmlText(this.TextHtml);

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

 

Siag.Seca.WinForms.ServiceBrowser.Controls.Html.EditDialog

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

    htmleditorEdit.NavigateTo(filename);

--> 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

Advanced

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

http://peitor.blogspot.com/2007/12/how-to-get-javasrcipt-returnvalue-from.html

 

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

 

NOTE

#1
tinyMce: Updated to current version 3.2.7
http://tinymce.moxiecode.com/download.php

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

#3
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 ---------------

#4
Deployment problems –> see this blog post

 

 Download here

Please test, let me know of any problems!

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