Home ProgrammingASP.NET RichTextEditor with ASP.NET using TinyMCE

RichTextEditor with ASP.NET using TinyMCE

by John Bhatt
3 comments 2196 views

As we know, ASP.NET lack a Control, that we need most, RichText Editor. To overcome from this, we can use Many open source editors. In this Article, we would learn how to Implement Free RichText Editor into ASP.NET website.

Requirement of RichText Editor in ASP.NET ?

As we know, ASP.NET lack a Control, that we need most, RichText Editor. If you are trying to create a application or website with Admin Panel or Blog or Forum Website or something such project for Web in ASP.NET platform, we need RickText Editor. To overcome from this, we can use Many open source JavaScript based editors, like Tiny MCE, FCKEditor, etc.

In this Article, we will learn how to Implement Free RichText Editor into ASP.NET website. We are using TinyMCE editor here.

We are using TinyMCE, which is One of most popular and Open Source project. Download latest version of TinyMCE from Download Page, and Extract the Zip File.

Extracting Source of Richtext Editor

Browse the Extracted Location and go to ..tinymce_3.5.6tinymcejscripts folder.

Extract and Paste TinyMCE Script in your Visual Studio Solution

Now Copy the tinymce folder from above Location to your Solution in Visual Studio.

Richtext Editor Adding to Solution

Add a Page where you want to Implement RichTextbox and Design the Page.

Sample Form

Add Reference of JavaScript file and add setting in HTML Head

Now lets Move to Topic. How to Add TinyMCE in Page and Richtext box Control placed for Content of Blog in above sample. Insert JavaScript file tiny_mce.js in Web Page and some also initialize this function. Add below Code into head section.

  <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" language="javascript">
        tinyMCE.init({
            // General options
            mode: "textareas",
            theme: "advanced",
            plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups",
           
        });
    </script>

Note: You can so many settings, look in Samples and Help Doc of TinyMCE.

Now Run the Page. Look, how it looked.

Richtext Box Live

Without any additional Practice, our TextBox with Multiline turned into RichText Editor.

Now, its OK as per Requirement. But No, when you will send command to Server (submit form), it will return Error Like below.

The Error

RichTextEditor with ASP.NET using TinyMCE 1

We have to add just One Line of Code in Web.config file and one property in Default.aspx form (Page with RichText Editor).

In web.config:

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
    <httpRuntime requestValidationMode="2.0"/>
  </system.web>
</configuration>

And in Page directive: ValidateRequest = "false"

After adding Page directive code, your line will be like below..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>

Now, you can save the Data in Database, Do postback, retrieve same in Rich Text box and do anything you want.

So anything is possible here. Don’t be worry about things that are not available. Just modify and make use of things those are available. Tiny MCE is one of the most known and Popular Rich Text editor (WYSIWYG).

3 comments

3 comments

Pallz November 18, 2014 - 12:17 PM

Hi John,
I am using TinyMCE in my MVC3 app and I am having mulitple Textareas. How can I implement rich text box in all textareas?
I get a rich text box only for the first textarea that comes up.

Reply
John Bhatt November 22, 2014 - 6:33 PM

Hi Pallz,

Sorry for delayed reply. I was out of town.
I have written another post for same concern. You can read below article and get some idea.
http://www.pyarb.com/2014/01/richtextbox-in-a-single-textbox-among-multiple-tinymce.html
If you still need some help, please revert.

Reply

Leave a Reply

Do NOT follow this link or you will be banned from the site!