Try MySite.GetContent() Catch(Useless Info) Finally Site.Close() End Try

The guide to programming and analyzing SQL, .NET, and SAP
posts - 18, comments - 280, trackbacks - 0

My Links

News

Hello World. I'm Jon Hermiz and am a software engineer here in Michigan. Feel free to look around and leave feedback!

Archives

Post Categories

How to add TinyMCE into ASP.net web form.

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:

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

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,

pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,

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

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

|,print,|,ltr,rtl,|,fullscreen","insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,

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>

 

<

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

 

</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 :

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,

Print | posted on Tuesday, November 17, 2009 1:01 PM | Filed Under [ .NET TinyMCE ]

Feedback

Gravatar

# 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
2/25/2010 1:31 AM | Dhaivat
Gravatar

# 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.
3/24/2010 1:47 AM | migliore sito di Roulette
Gravatar

# 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.
4/16/2010 6:07 AM | Cs Hacks
Gravatar

# 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
10/21/2010 5:42 PM | columbia jackets
Gravatar

# 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
1/25/2011 4:22 PM | Rolf
Gravatar

# 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.
2/15/2011 12:40 AM | Manish V Singh
Gravatar

# re: How to add TinyMCE into ASP.net web form.

Very Informative post. It really works out Just fine for Me thanks for sharing.
6/5/2011 6:21 AM | Dheeraj Kumar Bansal
Comments have been closed on this topic.

Powered by:
Powered By Subtext Powered By ASP.NET