Rich Text Editor with ASP.NET

Download TextEditor.zip - 634.8 KB

Introduction

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.

Content

In this Article, 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 most popular and Open Source project. Download 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 above Location to your Solution in Visual Studio.

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

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.

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 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, its 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 enything 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).

Reference:

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

John Bhatt

Software Developer (Senior) P.Yar.B Complex

Nepal

Member

Follow on Twitter
Google+

Google

John Bhatt is an IT Professional having interest in Web technology. He is Web Designer, Developer, Software Developer, Blogger and Technology Geek. Currently he writes his Blogs at Blog of P.Yar.B and various other Sites. He is Main author and founder of Download Center.
Contact Him at : Facebook | Twitter | Website.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

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.

Type	Tip/Trick
Licence	CPOL
First Posted	11 Sep 2012
Views	16,362
Downloads	2,401
Bookmarked	13 times

C#ASP.NETBeginner
RichTextBox