Jon Hermiz Blog

The guide to programming and analyzing SQL, .NET, and SAP

How to add TinyMCE into web form.

Recently I needed a WYSIWYG editor in my web form.  I looked at various ones including WMD Editor (which I
know is not exactly a WYSIWYG editor, there site states 'It just wasn't built for WYSIWYG. So WMD is something new:
a Wysiwym Markdown editor').  The support is lacking and from the looks of it the API is too.  Lastly, I've seen a lot of sites
using WMD Editor but the visitors on that site certainly don't care about a 'Markdown editor'.  End users try to manipulate
the formatting down to WYSIWYG so why bother?  Look at the comments in this post from stackoverflow if you don't believe me.
  As much as the creators of the site want users to read and listen a user's intuition and what they want to accomplish is more important.
  So why bother?  You code applications for people who plan to use it.  You just don't code it simply because you think it's right.

Usability is a topic on its own, lets focus on getting TinyMCE working inside of an web project. 

Getting TinyMCE

1. Download the development package of TinyMCE here

2. You'll get a folder structure starting at "tinymce" for now leave that in some temporary place (your desktop or c:\temp)

Copying TinyMCE Into Visual Studio

1. Fire up visual studio (this has been tested on 2005, 2008)

2. File->New->Web Site

3. Select ASP.NET Web Site for the language select C# (if you are more comfortable with VB then select Visual Basic)

4. Remember that tinymce folder you had saved temporarily, well it's time to drag and drop that folder into this project.

The result of that looks like this:

tinyMCE has an init() function which initalizes the mode, the theme, the various

buttons within the toolbars and so on.  So inside of your default.aspx go to the

source code and add the following javascript:

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">tinyMCE.init({"textareas","advanced","safari,pagebreak,style,layer,table,save,advhr,











"lists/media_list.js","Some User","991234"script>


// General options

mode :

theme :

plugins :

// Theme options

theme_advanced_buttons1 :

theme_advanced_buttons2 :

theme_advanced_buttons3 :

theme_advanced_buttons4 :

theme_advanced_toolbar_location :

theme_advanced_toolbar_align :

theme_advanced_statusbar_location :

theme_advanced_resizing :

// Example content CSS (should be your site CSS)

content_css :

// Drop lists for link/image/media/template dialogs

template_external_list_url :

external_link_list_url :

external_image_list_url :

media_external_list_url :

// Replace values for the template plugin

template_replace_values : {

username :

staffid :




You'll want to make sure you insert this inside of your <head> </head> section.

Inserting the TinyMCE textarea field

You're almost done all that is left is too add a textarea inside of your default.aspx page.  Something to this effect:


form id="form1" runat="server">





<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" runat="server"></textarea>br />


<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />





When I try to preview or get the data complains

A potentially dangerous Request.Form value was detected from the client (elm1="<p>fdsfsdfdsad</p>").

To fix this go back to the source (html) code of your default.aspx page.  You will see a page directive like so:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Change it to this:


We've simply added ValidateRequest="false" in the page directive.

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false"%>

How it ends up looking

If you've done everything correctly you should end up seeing a form like so:

But WMD Editor I can get a quick preview with one line of code

No problem you can do that with TinyMCE as well.  Remember the init() function we talked

about in the head section of your html.  Those control themes, buttons on the toolbars etc.

etc.  Well simply add the Preview button to one of the toolbars.

For instance, we had the following:

theme_advanced_buttons1 :

theme_advanced_buttons1 :



for one of the Theme options..simply add preview before say save so that the above becomes:

theme_advanced_buttons1 :

Now this will create a preview button in the toolbar right next to the save button.



So how do I get data or the text / formatting from the textarea box

Simple, it is runat=server so we have access to it via server side code.

Something like this behind the click event of a button




Legacy Comments

re: How to add TinyMCE into web form.
I have integrate tiny through your code...n working fine..thanks for the code.
Now i would like to integrate ibrowser with it but not able to working fine..
any help plz

migliore sito di Roulette
re: How to add TinyMCE into web form.
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source .It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

Cs Hacks
re: How to add TinyMCE into web form.
After using Telerik’s RadEditor control for years with all my web form applications, I found myself looking for a javascript alternative when I moved up to MVC. Having paid top dollar for RadEditor (which is a fine product!) and never used TinyMCE, I couldn’t imagine something free could be that good. Well it is! And really easy to use–whether in c#, vb, php, etc.–plus no nasty viewstate to bloat your page.

columbia jackets
re: How to add TinyMCE into web form.
So why bother? You code applications for people who plan to use it. You just don't code it simply because you think it's right.

Usability is a topic on its own, lets focus on getting TinyMCE working inside of an web project.

snow boots for women | columbia sportswear outlet | cheap mac makeup | the north face jackets

womens snow boots | columbia sportswear | cheap makeup | cheap north face jackets

re: How to add TinyMCE into web form.
When I add the tiny mce folder to my project I get following error:
Warning 1 Error updating JScript IntelliSense: C:\Users\hans\Documents\Visual Studio 2008\WebSites\Website1\management\js\tiny_mce\tiny_mce.js: Object doesn't support this property or method @ 0:48682

Manish V Singh
re: How to save MCE editor text in databse on button click event
Please give me the code of my problem as early as possible in my email id. Thank you.

Dheeraj Kumar Bansal
re: How to add TinyMCE into web form.
Very Informative post. It really works out Just fine for Me thanks for sharing.