Rich Text Editor with ASP.NET

• Download source - 634.8 KB

Introduction

As we know, ASP.NET lacks a control that we need most, RichText editor.

If you are trying to create an application or website with Admin Panel or Blog or Forum Website or some such project for Web in ASP.NET platform, we need RichText Editor.

To overcome this, we can use many open source JavaScript based editors, like Tiny MCE, FCKEditor, etc.

Content

In this tip, we would 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 the most popular and Open Source projects. Download the latest version of TinyMCE from download page, and extract the zip file.

Browse the extracted location and go to ..\tinymce_3.5.6\tinymce\jscripts folder.

Now copy the tinymce folder from the above location to your solution in Visual Studio.

Add a page where you want to implement RichTextbox and design the Page.

Now let's move to the topic on how to add TinyMCE in Page and Richtext box control placed for Content of Blog in the above sample.

Insert JavaScript file tiny_mce.js in Web Page and also initialize this function.

Place this 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 have so many settings, look in Samples and Help Doc of TinyMCE.

Now run the Page. Look how it looked.

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

Now, it's ok as per Requirement. No, when you will send Command to Server, it will return Error like below:

We have to add just one line of code in Web.config file and one property in Default.aspx form (Page with Rich Text Editor).

That is:

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"

<%@ 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.

Conclusion

IT is Jugad. So anything is possible here. Don't worry about things that are not available. Just modify and make use of things that are available. Tiny MCE is one of the most well known and popular Rich Text editors (WYSIWYG).

Reference

• http://www.tinymce.com/download/download.php