Click here to Skip to main content
12,076,727 members (44,360 online)
Click here to Skip to main content
Add your own
alternative version

Stats

92.7K views
9.2K downloads
22 bookmarked
Posted

Rich Text Editor with ASP.NET

, 11 Sep 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to implement free RichText editor into ASP.NET website

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

License

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

Share

About the Author

John Bhatt
Founder P.Yar.B Complex
Nepal Nepal
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 | PRB - Blog.

You may also be interested in...

Comments and Discussions

 
Questionhow to add the text editor for single line text box? Pin
Member 1124396021-Jan-16 21:59
memberMember 1124396021-Jan-16 21:59 
QuestionThe Control can't work well in IIS. Pin
Member 113518933-Feb-15 16:06
memberMember 113518933-Feb-15 16:06 
QuestionProblem with image Pin
Member 1107396810-Sep-14 21:17
memberMember 1107396810-Sep-14 21:17 
AnswerRe: Problem with image Pin
John Bhatt21-Sep-14 3:31
memberJohn Bhatt21-Sep-14 3:31 
QuestionProblem with initialization Pin
Lefteris Gkinis31-Mar-14 11:33
memberLefteris Gkinis31-Mar-14 11:33 
AnswerRe: Problem with initialization Pin
John Bhatt1-Apr-14 1:21
memberJohn Bhatt1-Apr-14 1:21 
QuestionHow to bind TinyMCE Rich TextBox to particular text box Pin
sayedfarhan10-Dec-13 2:15
membersayedfarhan10-Dec-13 2:15 
AnswerRe: How to bind TinyMCE Rich TextBox to particular text box Pin
John Bhatt10-Dec-13 23:41
memberJohn Bhatt10-Dec-13 23:41 
GeneralRe: How to bind TinyMCE Rich TextBox to particular text box Pin
John Bhatt1-Apr-14 1:23
memberJohn Bhatt1-Apr-14 1:23 
QuestionHow To add Tamil Font. Pin
saerluvla Arul13-Jun-13 0:43
membersaerluvla Arul13-Jun-13 0:43 
AnswerRe: How To add Tamil Font. Pin
John Bhatt11-Dec-13 0:01
memberJohn Bhatt11-Dec-13 0:01 
QuestionSql Injection Pin
saerluvla Arul21-Mar-13 21:05
membersaerluvla Arul21-Mar-13 21:05 
AnswerRe: Sql Injection Pin
John Bhatt14-Apr-13 21:05
memberJohn Bhatt14-Apr-13 21:05 
QuestionRE: your post abt rich text box Pin
Member 983287813-Feb-13 5:54
memberMember 983287813-Feb-13 5:54 
AnswerRe: RE: your post abt rich text box Pin
John Bhatt14-Apr-13 21:03
memberJohn Bhatt14-Apr-13 21:03 
QuestionLimited tools Pin
deivisvieira15-Jan-13 7:40
memberdeivisvieira15-Jan-13 7:40 
AnswerRe: Limited tools Pin
John Bhatt15-Jan-13 20:30
memberJohn Bhatt15-Jan-13 20:30 
GeneralThanks Pin
h_salimi4-Dec-12 4:08
memberh_salimi4-Dec-12 4:08 
GeneralRe: Thanks Pin
John Bhatt4-Dec-12 4:51
memberJohn Bhatt4-Dec-12 4:51 
QuestionA potentially dangerous Request.Form value was detected from the client (ctl00$ContentPlaceHolder1$RichTextBox="<p>TEST!</p>"). Pin
saerluvla Arul1-Nov-12 1:11
membersaerluvla Arul1-Nov-12 1:11 
AnswerRe: A potentially dangerous Request.Form value was detected from the client (ctl00$ContentPlaceHolder1$RichTextBox="<p>TEST!</p>"). Pin
John Bhatt1-Nov-12 2:17
memberJohn Bhatt1-Nov-12 2:17 
QuestionRe: A potentially dangerous Request.Form value was detected from the client (ctl00$ContentPlaceHolder1$RichTextBox="<p>TEST!</p>"). Pin
saerluvla Arul1-Nov-12 3:38
membersaerluvla Arul1-Nov-12 3:38 
AnswerRe: A potentially dangerous Request.Form value was detected from the client (ctl00$ContentPlaceHolder1$RichTextBox="<p>TEST!</p>"). Pin
John Bhatt1-Nov-12 4:07
memberJohn Bhatt1-Nov-12 4:07 
QuestionHelp doc Pin
Amalraj Ramesh12-Feb-13 2:43
memberAmalraj Ramesh12-Feb-13 2:43 
AnswerRe: Help doc Pin
John Bhatt23-Jan-14 6:09
memberJohn Bhatt23-Jan-14 6:09 
GeneralMy vote of 4 Pin
saerluvla Arul24-Oct-12 20:42
membersaerluvla Arul24-Oct-12 20:42 
GeneralRe: My vote of 4 Pin
John Bhatt25-Oct-12 4:44
memberJohn Bhatt25-Oct-12 4:44 
GeneralThanks! Pin
saerluvla Arul27-Oct-12 3:11
membersaerluvla Arul27-Oct-12 3:11 
GeneralRe: Thanks! Pin
John Bhatt27-Oct-12 3:18
memberJohn Bhatt27-Oct-12 3:18 
QuestionHow do you validate against attacks? Pin
Philippe Mori11-Sep-12 11:13
memberPhilippe Mori11-Sep-12 11:13 
AnswerRe: How do you validate against attacks? Pin
John Bhatt11-Sep-12 20:11
memberJohn Bhatt11-Sep-12 20:11 
Generalthanks Pin
Sirwan Afifi11-Sep-12 11:10
memberSirwan Afifi11-Sep-12 11:10 
GeneralRe: thanks Pin
John Bhatt26-Sep-12 23:16
memberJohn Bhatt26-Sep-12 23:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.160212.1 | Last Updated 11 Sep 2012
Article Copyright 2012 by John Bhatt
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid