How to setup TinyMCE using ASP.NET (C#) ? How to customize TinyMCE buttons ?


Today we are going to take a look at one of the most customizable Rich Text Editors for Asp.Net – TinyMCE.

How to setup tinyMCE

In this post I will give you couple of tricks how to easily set  it up, customize and avoid most common problems such as “Required Field Validator” and “A potentially dangerous Request.Form value was detected” errors.

Let’s start.

1. First of all download TinyMCE from here:

http://www.tinymce.com/download/download.php (download first one)

2. Unpack “tinymce” folder to your Web Project root folder.

(My project is divided into Admin and Member sections, and tinymce is used only Admin that’s why I unpacked it in Admin folder)

3. Now go to the page where you will be using TinyMCE and add following code at the top:

<script language="javascript" type="text/javascript">
 tinyMCE.init({
                  mode: "textareas",
                  theme: "advanced",
                  theme_advanced_toolbar_location: "top",
                  theme_advanced_buttons1: "italic,underline,separator,justifyleft,justifycenter,justifyright,separator,formatselect,separator,bullist,numlist,link,unlink",
                  theme_advanced_buttons2: "",
                  theme_advanced_buttons3 : "",
                  encoding: "xml"
 });
</script>
<!--end of code -->

4. Let’s take a look at each line, so you know how to customize your tinyMCE toolbar:

a. mode: “textareas”

- means that it will replace all textareas or

b. theme: “advanced”

      – means that you choose advanced theme

c.  I used “theme_advanced_toolbar_location:

-  because when I first installed tinyMCE toolbar appeared at the bottom. So to fix it I used theme_advanced_toolbar_location property

d. theme_advanced_buttons1:

       –  describes what buttons will appear on first row of toolbar (theme_advanced_buttons2 and 3 describes second and third rows)

List of the buttons is here: http://www.tinymce.com/wiki.php/Buttons/controls

e. encoding: “xml”

- solves  “A potentially dangerous Request.Form value was detected”, which won’t allow you to submit the Web Form

This is all what you need to set up your tinyMCE.

However, there is one more trick that will help you to avoid problem of Required Field Validator saying that your textarea is empty.

5. All you need to do is add following to your textarea or asp:TextBox:

OnClientClick=”tinyMCE.triggerSave(false,true);”

Example:

<asp:Button ID="btnPublish" runat="server" Text="Publish" CssClass="button"
 Height="36px" Width="88px" onclick="btnPublish_Click1"
 ValidationGroup="postValid" OnClientClick="tinyMCE.triggerSave(false,true);"/>

So here what I got:

About these ads

About Anatoly Spektor

My name is Anatoly Spektor (originally Anatolijs Spektors) I am Software and Web Developer. I have worked in Seneca Center for Development of Open Technology on Big Blue Button Add-on - Polling Module. Currently, I am employed as Software Engineer in Red Hat.
This entry was posted in Programming Languages, ASP.NET, C Sharp and tagged , , , , , , , , , . Bookmark the permalink.

11 Responses to How to setup TinyMCE using ASP.NET (C#) ? How to customize TinyMCE buttons ?

  1. Rina Sihotang says:

    thank you ..

  2. Pankaj says:

    Thanks :)

  3. It’s a pity you don’t have a donate button! I’d definitely donate to this outstanding blog! I suppose for now i’ll settle for
    bookmarking and adding your RSS feed to my Google account.

    I look forward to new updates and will share this website
    with my Facebook group. Talk soon!

  4. venkatesh says:

    super worked gr8 :). saved my day :)

  5. Pingback: [RESOLVED]TinyMCE editor in asp.net | ASP Questions & Answers

  6. Pingback: html editor that work with ASP.NET Empty Web Application | ASP MVC

  7. Pingback: Edit area | ASP Questions & Answers

  8. Pingback: [RESOLVED]TinyMCE editor in asp.net | ASP Web Form Data Control

  9. Pingback: Edit area | ASP Web Form Data Control

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s