Post
Ask Question

HTML Editor in ASP.Net Using jQuery Instead of AJAX

Introduction

This article will help you to create a HTML editor in ASP.NET web pages using jQuery. If your are using the AJAX HTML Editor Extender then that means it will take more time to load the AJAX toolkit. The jQuery editor is an easy and lightweight HTML editor for ASP.NET pages.
 
 
Step 1 

Open Visual Studio then click on Add New Project then add a webform (default.aspx).
 
Step 2

Add the following script in your head tag. I have attached the source file with the necessary CSS and scripts files. Please find it and call those files.
  1. <script src=jquery-1.3.2.js" type="text/javascript"></script>  
  2.       
  3.     <script src="Html_editor/scripts/jHtmlArea-0.8.min.js" type="text/javascript"></script>  
  4.     <link href="Html_editor/scripts/jHtmlArea.css" rel="stylesheet" type="text/css" />  
  5.       
  6.     <script type="text/javascript">  
  7.         $(function () {  
  8.             $("textarea").htmlarea(); // Initialize jHtmlArea's with all default values
  9.         });  
  10.     </script>  
 Step 3

Add the following text area within your form tag.
  1. <textarea runat="server" id="txtText" cols="50" rows="15"></textarea>  
 Output
 
Full Example (C#)
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SendEmail.aspx.cs" Inherits="AdventureSports.Public.SendEmail" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.  <script src="../HTML_Editor/scripts/jquery-1.3.2.js" type="text/javascript"></script>  
  9.       
  10.     <script src="../HTML_Editor/scripts/jHtmlArea-0.8.min.js" type="text/javascript"></script>  
  11.     <link href="../HTML_Editor/style/jHtmlArea.css" rel="stylesheet" type="text/css" />  
  12.       
  13.     <script type="text/javascript">  
  14.         $(function () {  
  15.             $("textarea").htmlarea(); // Initialize jHtmlArea's with all default values  
  16.   
  17.             //window.setTimeout(function() { $("form").submit(); }, 3000);  
  18.         });  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <form id="form1" runat="server">  
  23.      <div>  
  24. <textarea runat="server" id="txtText" cols="50" rows="15"></textarea>  
  25. </div>  
  26. </form>  
  27. </body>  
  28. </html>  
This is the procedure to implement a lightweight HTML editor in your web pages in a simple manner.

Thank you! 


Similar Articles