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.

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:

1

2

3

4

5

6

7

8

9

10

11

12

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

1

2

3

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

All about IT

Search This Blog