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:
- I extended this Windows Forms based text editor with HTML output control from Kevin (from codeproject) to use TinyMce as an editor.
- With this helpful control HTML Viewer component from Nikhil
- 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
fast reaction time
