Click here to Skip to main content
14,029,967 members
Click here to Skip to main content
Add your own
alternative version


20 bookmarked
Posted 28 Jul 2013
Licenced CPOL

Text/HTML Editor With ASP.NET

, 28 Jul 2013
Rate this:
Please Sign up or sign in to vote.
Text/HTML Editor With JQuery In ASP.Net


This is a text/HTML editor for ASP.NET with jQuery. ASP.NET doesn't provide any control for text editing, so this solution will be helpful for online editing on text. This solution is for people who want to format text in their applications and store in the database.


For text editing ASP.NET doesn't provide any control. So we have to use a third party tool or AJAX. In my solution I am using jQuery for text editing and the value that I get is stored in the database.

Using the code

I am using ASP.NET TextBox control for the text editor. I use the multiline mode of the textbox. In the page, Demo.css and jquery-te-1.4.0.css are added and after that jquery-te-1.4.0.min.js and jquery-1.10.2.min.js are used/added for text editor functionality.

A button control is used for getting the textbox value in HTML format to store in the database. On the click of a button the server gets a formatted data value and then it is bound to another textbox. (You could also use this data to store in the database.) In this process the JQTE blur event is helpful.

Below is the code for the text editor:

<head runat="server">
    <title>Text Editor With JQuery</title>
    <link href="CSS/demo.css" rel="stylesheet" type="text/css" />
    <link href="CSS/jquery-te-1.4.0.css" rel="stylesheet" type="text/css" />
    <form id="form1" runat="server">
        <asp:TextBox ID="txtEditor" TextMode="MultiLine" 

            runat="server" CssClass="textEditor"

        <asp:Button ID="btnText" runat="server" 

            Text="Show Text" OnClick="btnText_Click" />
        <asp:HiddenField ID="hdText" runat="server" />
        <asp:TextBox ID="txtReText" TextMode="MultiLine" 

           runat="server" CssClass="textEditor1"></asp:TextBox>
<script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="JS/jquery-te-1.4.0.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(".textEditor").jqte({ blur: function () {
        document.getElementById('<%=hdText.ClientID %>').value = 
               document.getElementById('<%=txtEditor.ClientID %>').value;


protected void btnText_Click(object sender, EventArgs e)
    txtReText.Text = hdText.Value;

Points of Interest

This is an easy way for implementing a text editor in ASP.NET and is compatible with every browsers using jQuery.


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


About the Author

Vaibhav Bodake
Software Developer Alitesoft
India India
Software Engineer with year of successful records serving small and mid scale .NET applications. Have a wide range of experience working in domestic client environment. I always love to learn new technologies and share with others.

You may also be interested in...

Comments and Discussions

QuestionChrome issue for this HTML editor Pin
Member 1327052915-May-18 20:45
memberMember 1327052915-May-18 20:45 
GeneralMy vote of 5 Pin
Member 1352486116-Nov-17 5:13
memberMember 1352486116-Nov-17 5:13 
QuestionGetting Error while using same code in Pin
Yogesh Wani25-May-17 0:25
memberYogesh Wani25-May-17 0:25 
QuestionOnline t-shirt designing Pin
Member 130975088-Apr-17 8:28
memberMember 130975088-Apr-17 8:28 
QuestionHow to seperate the tools and the text box ? Pin
Member 1124396021-Jan-16 20:56
memberMember 1124396021-Jan-16 20:56 
SuggestionRe: How to seperate the tools and the text box ? Pin
Vaibhav Bodake7-Jun-16 20:05
professionalVaibhav Bodake7-Jun-16 20:05 
QuestionJQTE not working with ASP.Net Pin
memrleea6-Apr-15 11:37
membermemrleea6-Apr-15 11:37 
GeneralMy vote of 5 Pin
Ajith_joseph5-Nov-14 6:22
memberAjith_joseph5-Nov-14 6:22 
QuestionJquery text Editor Pin
shashi c18-Nov-13 22:30
membershashi c18-Nov-13 22:30 
QuestionHow to add smileys and colours in text editor? Pin
syna syna12-Nov-13 2:18
membersyna syna12-Nov-13 2:18 
GeneralMy vote of 5 Pin
Anuj Tripathi28-Jul-13 2:59
memberAnuj Tripathi28-Jul-13 2:59 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190419.4 | Last Updated 29 Jul 2013
Article Copyright 2013 by Vaibhav Bodake
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid