CodeProject: tinyMCE HTML editor in .NET WindowsForms. Free source code and programming help

Report Article

Discuss

Send to a friend

6 votes for this Article.

Popularity: 2.85 Rating: 3.67 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download WF-tinyMCE - 651.88 KB

Introduction

Had you in past need to incorporate some HTML validating editor into your .NET desktop client? I did, so I started to look around for some components and found one, which is free and widely used, tinyMCE form Moxito.

One complication is that this one uses browser to render edited content and is completely written in JScript, so one have to “hack” some browser control.

I’ll describe how to incorporate an IE ActiveX into .NET form, join needed soap of tinyMCE into work file and load this work file into IE ActiveX.

Background

As I said tinyMCE is JScript wrapper over browser textarea control.

One possible solution is to use some browser control, load it with content and let the browser to do the work with Jscript. Let’s assume, we’re on Windows platform, so IE is incorporated in system.

So what we need is to store somewhere tinyMCE package, generate work HTML file, which contains edited text and links to tinyMCE scripts.

I decided to use users application folder, special subfolder will be created and tinyMCE package as like as workfile will be stored.

Last thing to solve is to look over tinyMCE and check what it needs to work. And it’s not too much, in minimal version only few lines of code.
Let’s take simple example based on tinyMCE package examples:

<html>
<head>
<title>tinyMCE
minimal example</title>
 
<!—SETTINGS
section -->
<!--
TinyMCE -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
       tinyMCE.init({
              mode : "textareas,save",
              theme : "simple"
       });
</script>
<!-- /TinyMCE -->
 
</head>
<body>
 
<!—tiny MCE section -->
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
       <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
        This is Edited Text
       </textarea>
</form>
 
</body>
</html>

Looking around this snippet, one can see we need to construct settings section and tiny MCE section. Settings are needed for tinyMCE to tell what plugins to load, what encoding and format of the text we need etc., and second section is textarea element encapsulated in form element, and this is what tinyMCE hooks and use as editing area.

Last point about “design” - it has to be reusable around few applications, so I encapsulated everything in one form class FrmHTMLBrowser, which is enabled to view or edit text. Why not in control? Well, tinyMCE is not pure control, we have to use some “hacks” with temp files, so it is a bit safer and more robust to use modal dialog box. Programmers, who will use this form, will be forced to use it more carefully and declaratively, not allowed to just paste control in designer whereever they think is fine.

One little thing to think about - browser needs to be JScript in path or subpath where workfile resides. That's why we have to place everything in one place. Basically, no matters where, if in ApplicationData\LocalSettings ot \Temp or wherever else, but in one place.

Think also about running your application on terminal services - that's why I chose user ApplicationData. No problem with interfering forms.

Note: Problem with interfering forms will arise when same applications will run concurrently in same user profile and will be of same editor type (same Type parameter in EditText). But this is not my case, if yours, try to use more specific storage or workfile indexing (find first "free" name). tinyMCE package can be shared, that's not a problem.

"line-height: normal;" class="MsoNormal">

 Using the code 
"line-height: normal;" class="MsoNormal">I used some helper methods to get it
everything work in FrmHTMLBrowser.

private string
getWorkPath(string subPath)

this one gets path to temporary
storage where work file and tinyMCE package are stored. Actually returns
subfolder M_WORKPATH in  Environment.SpecialFolder.LocalApplicationData

public void PrepareTinyMCE()

checks
if tinyMCE already exists, if not, unzips package using ICSharp.ZipLib

public Stream GetResourceFile(string File)

gets
stream from embedded resources

public string EditText(string Text, string Type, string CSSFile)

Public method for editing text,
covers and calls showText.

Type allows you
to store work file with different name, so you can call simultaneously few
edit forms in one running user profile (theoretically, it’s not this case while form is shown modal). 
private void showText(bool edit) 

Main method. Here, HTML work file with links to tinyMCE Jscript is constructed
and stored into temporary file.

There’s a little bit custom code in this method, CSS replacement. Method looks
in settings for [CSS] string and replaces it with passed path to CSS. Why this
is usefull? Well, when you’ll use this form eg. as editor for product
descriptions over multiple regional databases of multiple companies, You’ll need
to pass different CSSs got from database for example.





Aftre constructing work page and preparing tinyMCE package browser is navigated to work
file by calling

axBrowser.Navigate(sDoc);

User stores text by pressing Save
button in tinyMCE, that’s why in setting section it’s declared tinyMCE have to
use save plugin. One more hack, when
save is used, one need to cancel postback action of the form otherwise will
get tinyMCE error message. Looking into implementation leads to simple solution
in showText:

sb.AppendLine("<form method=\"\" action=\"\" onsubmit=\"return false;\">"); 

That’s it, smart guys in Moxito
think about it, cancelling onsubmit will cancel error message too.

Last thing, how to get edited text
back?

m_text = ((mshtml.IHTMLDocument3)axBrowser.Document).getElementById("elm1").innerText;

Retyping root DOM document of the IE
control to IHTMLDocument3 allows you to access document elements represented by
DOM model, so it’easy to get content of textarea elm1, where tinyMCE resides.
 
Use FrmHTMLBrowser class to create
editor enabled window just as in example.

tinyMCE and settings are stored in
resources as embedded resource, you can of course modify this solution and use disk
storage or whatever you imagine.
 Call FrmHTMLBrowser as you need, you'll get content of the editor back. 

  FrmHTMLBrowser brw = new FrmHTMLBrowser();
  ctlRtf.Text = brw.EditText(ctlRtf.Text, "tempfilename", "yourCSS.css");  

Here in "tempfilename"
you can specify name of work file, yourCSS.css will specify path to CSS
file (of course again, it'll be copied into work folder and make as relative path to packcage) , which will be used by tinyMCE to fillup Style combobox.

Links


tinyMCE is © of Moxito, http://tinymce.moxiecode.com/

sharpZIPLib is http://sharpdevelop.net/OpenSource/SharpZipLib 
Points of Interest
It's not my point of interest, HTML editors.
Rather HW, Neural Networks, signal processing. But as in real life, I needed
some HTML editor, and this one is very good and free under GPL.
History 
Implemented, tested 20080707

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Ondra Spilka

Occupation:	Software Developer (Senior)
Location:	Czech Republic

Other popular Edit Controls articles:

Crystal Edit - syntax coloring text editor
A set of classes that provide an expandable framework for the syntax coloring text editor.
Validating Edit Controls
The classes presented in this article provide benefits for the most popular types of data that may be entered.
Insert Plain Text and Images into RichTextBox at Runtime
This article describes how to programmatically insert text and images into a RichTextBox at runtime.
Brainchild, A syntax coloring edit control
Syntax coloring, multi-level undo/redo editor control.
Validating Edit Controls
CEdit-derived classes which validate the most popular types of data input.

Article Top

You must Sign In to use this message board.

Msgs 1 to 8 of 8 (Total in Forum: 8) (Refresh)

FirstPrevNext

Exactly like my solution

peitor

5:39 24 Jul '08

so only 4 stars for this in action http://peitor.blogspot.com/2008/02/tinymce-with-webeditor-control-in.html detail http://peitor.blogspot.com/2007/12/great-windows-forms-html-control.html get value from webbrowser control html http://peitor.blogspot.com/2007/12/how-to-get-javasrcipt-returnvalue-from.html
Sign In·View Thread·PermaLink

Load errors;

Glen Harvy

4:26 12 Jul '08

VS2008 Loading FrmHTMLBrowser
1. Could not load type 'SHDocVw.IWebBrowser2' from assembly 'AxInterop.SHDocVw, Version = 1.1.0.0 etc etc

2. The variable 'axBrowser' is either undeclared or was never assigned.

I tried renaming AxInterop.SHDocVw.dll to Interop.SHDocVw to eliminate the compile time error but it still crashes on clicking the button.

I feel more like a beta tester than anything else.

This is a project that I think has a lot of potential but it also needs a lot of work.

Can I suggest you try to install and run the package on a machine that is not your development machine because the references are wrong.

If the project needs specific changes before running can you please list the changes required in a step by step process.

Thanks.

Glen Harvy

Re: Load errors;

Ondra Spilka

5:45 12 Jul '08

Hi Glen,

I don't think this is the place where you got complete piece of work. You have to spentsome time to get it work, especially if it is like this type of hack.

But I agree, this project has great potential / it runs on 10 Xeon terminal servers W2008 for at least 1000 users, without problems. Work is done.

Let's try to help you / look if you have lib folder in yoour project. Then look in csproj, if teher is a line

False
lib\AxInterop.SHDocVw.dll

Must be relative.

finally, look into references of your project, if there're exclamations in tree. If they're, look into properties and try to solve the problems.

Thanx for post

Ondra

Re: Load errors; [modified]

Glen Harvy

13:46 12 Jul '08

To get the supplied package to work:

In the references..
1. Delete the reference to AxSHDocVw
2. Delete the reference to RepositoryTypeLib.

3. Add a reference to AxSHDocVw by selecting it from the .NET components.

Build and run.

Current problem:

Line 203 (or thereabouts)

			try
			{
                             //axBrowser.Navigate(sDoc);  <==== commented out to get running
			}
			catch(Exception e)
			{
				string s= e.Message;
			}

Gotta go out .. more later Smile

Later:

In the try block change to:
object empty = System.Reflection.Missing.Value;
axBrowser.Navigate(sDoc, ref empty, ref empty, ref empty, ref empty);

Glen Harvy

modified on Saturday, July 12, 2008 8:32 PM

Problem

kedysoft

21:37 11 Jul '08

Hi, when I downloaded the project and load it I got an error about one missing reference named: RepositoryTypeLib. how to solve this issue? Alt+F11
Sign In·View Thread·PermaLink	3.00/5 (1 vote)

Re: Problem

Ondra Spilka

5:48 12 Jul '08

Hi look into references of your project, if there're exclamations in tree. If they're, look into properties and try to solve the problems. The repository Type Lib is as "part" of MSHTML, at keast it's added automatically when you add MSHTML reference. Look on it, if there're problems, or delete MSHTML reference and add it again from references / it's Microsoft HTML object library. Ondra
Sign In·View Thread·PermaLink

Re: Problem

kedysoft

23:15 13 Jul '08

Hi again,
I removed the reference of MSHTML and the reference of RepositoryTypeLib (which has exclamation), then I added the reference to Microsoft HTML Object library from the COM tab of the references dialog box, but the Reference to RepositoryTypeLib not added automatically and when run the program it will compile well and the main form will appear but when click the edit button an exception: FileNotFoundException will be thrown with this message:
Could not load file or assembly 'Interop.SHDocVw, Version=1.1.0.0, Culture=neutral, PublicKeyToken=null' or one of its dependencies. The system cannot find the file specified.

please help, and tell us if their are any prerequisites to use this projects

thanks

Alt+F11

[Message Removed]

Mojtaba Vali

19:12 8 Jul '08

Spam message removed
Sign In·View Thread·PermaLink	1.33/5 (2 votes)

Last Visit: Thursday, November 20, 2008 7:58 AM Last Update:Thursday, November 20, 2008 7:58 AM

General News Question Answer Joke Rant Admin