How to add TinyMCE into ASP.net web form.

Tue Nov 17, 2009 by Jon Hermiz in net, tinymce

Recently I needed a WYSIWYG editor in my asp.net 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 ASP.net 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:

advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,

contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,

template","save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright

,justifyfull,styleselect,formatselect,fontselect,fontsizeselect","cut,copy,paste,pastetext,

unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",

"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,

abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak","top","left","bottom",

true,"css/content.css","lists/template_list.js","lists/link_list.js","lists/image_list.js",

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

<div>

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

</div>

</form>

When I try to preview or get the data ASP.net 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 :

justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",

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.

justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",

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

Response.Write(this.elm1.Value);

"preview,save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft, "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,

Legacy Comments


Dhaivat 2010-02-25	re: How to add TinyMCE into ASP.net 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 2010-03-24	re: How to add TinyMCE into ASP.net 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 2010-04-16	re: How to add TinyMCE into ASP.net web form. After using Telerik’s RadEditor control for years with all my asp.net 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 2010-10-21	re: How to add TinyMCE into ASP.net 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 ASP.net 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

Rolf 2011-01-25	re: How to add TinyMCE into ASP.net 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 2011-02-15	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 2011-06-05	re: How to add TinyMCE into ASP.net web form. Very Informative post. It really works out Just fine for Me thanks for sharing.