Thursday 21 April 2016

HTML editor for asp.net web pages using JQuery instead of AJAX

Introduction
I am going to explain how to create html editor control for asp.net web pages with light weight jquery plugin. Here is the example.
 
 
Step 1 
Create new visual studio project
 
Step 2
Download files from here. Add necessary files like shown below  
  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>  
  Full Example
  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! 

No comments:

Post a Comment