Working with JQuery Text Editors

What if one of your client requirement is to provide a area where they can write some information in some particular format like in bold, italic, heading, underline etc and can save it and retrieve it back whenever required...

If your application is desktop you can get many options like you can open local installed application instance like word, lib-re etc

What if you are creating web application??
Solution is simple.. Jquery the most powerfull language in programming world can help you anytime...

There are many plugins build on top of jquery available for free over the net.
Some of them are as follows:
1. Jqte
2. tinyMCE
3. CKEditor and many more...

Sample using Jqte(jquery text editor)

1.  You need to download js and css file of jqte first and include it in your page:
    <link href="../../Scripts/jquery-te-1.4.0.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-te-1.4.0.min.js"></script>

2. html part:
  <input type="text" id="Body"/>

3. j query part:
    $("#Body").jqte(); // in .ready function

4. Fetching information entered by user:
  var DescriptionDetails = $("#Body").val();

  This will give you the string with the html tags. If you are planning to pass the data to server it won't work because it consists html tags. So to overcome the problem use escape function of jquery

  This function makes a string portable, so it can be transmitted across any network to any computer that supports ASCII characters.
  var Bodyvalescape = escape(Bodyval);

5. You can now send the string to server and encode it and store it...

6. Now how to populate the jqte:
     Get data from server side show it in jqte by writing below code
     $(".jqte_editor").html(data); // in jquery
 
   $(".jqte_editor").attr("contenteditable", "false");// will make editor non-editable
   $(".jqte_editor").attr("contenteditable", "true");// will make editor editable

For more information about other events available in jqte go to : http://jqueryte.com/ 

Similarly by performing some minor changes you can easily use some other editors..

Till then enjoy and have fun with JQuery