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

Tuesday, November 17, 2009

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,

posted @ Tuesday, November 17, 2009 1:01 PM | Feedback (7) | Filed Under [ .NET TinyMCE ]

Powered by:
Powered By Subtext Powered By ASP.NET