Introduction
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.
Background
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" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtEditor" TextMode="MultiLine"
runat="server" CssClass="textEditor"
onblur="Test()"></asp:TextBox>
<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>
</div>
</form>
</body>
<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">
$('.textEditor1').jqte();
$(".textEditor").jqte({ blur: function () {
document.getElementById('<%=hdText.ClientID %>').value =
document.getElementById('<%=txtEditor.ClientID %>').value;
}
});
</script>
Code-behind:
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.
