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:

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:

So here what I got:

About the author

Anatoly Spektor

IT Consultant with 6 years experience in Software Development and IT Leadership. Participated in such projects as Eclipse IDE, Big Blue Button, Toronto 2015 Panam Games.

View all posts

9 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *