Add Rich Text Editor in Asp.net Website

Today I will Show you How to add a Rich Text Editor in Asp.net Website and Web Application which will Present your web site and Web application in a Professional and Beautiful way.
Before we start , Lets Take Some Back Ground Knowledge, ASP.NET lacks a Control, that we need often a times which is a Rich Text Editor.
To overcome this Problem, we can use Many open source editors and In this Article, we would learn how to Implement Free Rich Text Editor into ASP.NET website.

We can use Many open source JavaScript based editors, like Tiny MCE, FCKEditor, etc.

So Lets Start,
First Create a new Asp.net web site .
In this Tutorial We are using TinyMCE editor. Which is One of most popular and Open Source project. Download latest version of TinyMCE from (Download Here ), and Extract the Zip File.

Now Browse the Extracted Location and go to ..\tinymce\jscripts\tiny_mce\ folder and Copy the tiny_mce and Paste to your (Asp.net Web) Solution in Visual Studio.

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

Html Degin code is Below

<form id="form1" runat="server">
   <table align="center" style="height: 586px; width: 80%">
       <tr>
           <td align="center" colspan="2"><h1>Rich Text Editor Demo </h1>
               <h3>undefinedCreate New Post -by<b> www.visualstudiolearn.com </b> )</h3>
               <p></p></td>
       </tr>
       <tr>
           <td class="auto-style1">
               Post Title : 
           </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server" Width="250px"></asp:TextBox>
            </td>
       </tr>
       <tr>
           <td valign="top" class="auto-style1">
            Body :
           </td>
           <td>
               <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Height="327px" 
                   Width="528px"></asp:TextBox>
               <br />
               <br />
           </td>
       </tr>
       <tr>
           <td class="auto-style1">
               Tags :
           </td>
           <td>
               <asp:TextBox ID="TextBox3" runat="server" Height="22px" Width="267px"></asp:TextBox>
           </td>
       </tr>
       <tr>
           <td colspan="2" align="left">
               <asp:Button ID="Button1" runat="server" Text="Post" />
               <asp:Button ID="Button2" runat="server" Text="Clear" />
           </td>
       </tr>

   </table>
  
    </form>

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

Below Code Show How to do this.

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

Now Run the Page.View the Output.

Without any additional Practice, you can See now our Text Box with Multi-line turned into Rich Text Editor.

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 Web Page directive:
ValidateRequest = "false"

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

Now, you are able to save Data in Database, Do postback, retrieve same in Rich Text box and do anything you want.

Download Source Code (Google Docs)
or
Download Source Code(4Shared)

Plese Feel Free to Socializer This Post

SOCIALIZE IT →

Sep 26, 2012