Everyone was VERY excited about the possibility to show HTML content inside Silverlight.
But soon we Silverlight developers realized that it wont work in a inside-browser scenario (if you can call it like that).
It’s a NOOB scenario where we need the browser control, just like the browsercontrol in Winforms (aahhh… the good old days, everything was better ;-)
NOOB = Not Out of Browser scenario
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:
Reason: We wanted (in our Windows Forms application) to have the same look-and-feel as web users have with the web tinyMce editor.
The usercontrol "Siag.Seca.WinForms.ServiceBrowser.Controls.Html.HTMLUserControl" is a wrapper around: "HtmlEditor"
Property HTMLUserControl.TextHtml = my property from datasource
Prerequisites
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
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
i developed a winforms application that shows and edits html data.
(for details see older posts)
the control that i use, uses the mshtml library from the Microsoft.mshtml.dll found in the Application Folder of vs2008
"c:\Program Files\Microsoft Visual Studio 9.0\Visual Studio Tools for Office\PIA\Office11\Microsoft.mshtml.dll"but this dll is ARRGGGH!
In my previous post about the htmlcontrol i have not explained how i communicate with the tinymce javascript to get the actual values from the textarea.
Here is it how it works...
string valueFromTinyMce;
IHTMLDocument2 htdoc2 = editor2.HTMLDocument2; IHTMLWindow2 parentWindow = htdoc2.parentWindow; if (parentWindow != null) { IHTMLElement el = htdoc2.createElement("input"); el.id = "myValue"; ((IHTMLDOMNode)htdoc2.body).appendChild((IHTMLDOMNode)el); parentWindow.execScript("document.all['myValue'].value = tinyMCE.getContent('mce_editor_0')", "javascript"); valueFromTinyMce = el.getAttribute("value", 0); }
I finally found a working HTMLControl to show and Edit HTML Content for Windows Forms Applications.
It uses internally a webeditor Control, and works great.
I did not verify memory usage :-)
http://www.codeproject.com/cs/miscctrl/editor_in_windows_forms.asp
Maybe this link will work!
http://www.codeproject.com/KB/edit/editor_in_windows_forms.aspx
I have modified it to work with tinyMce.
Normally it is in NON Enabled Mode.
If it goes into Editmode (DesignModeEnabled=true) then it shows the tinymce
http://tinymce.moxiecode.com/
If someone is interested in my code let me know...
EDIT
i have made some screenshots.
And here i explain how you can communicate with the hosted webeditor, resp. tinymce
