April 29, 2014 10:18 am

How to Create textarea into a rich content/text editor using jQuery

This tutorial will teach you that how you can create rich content/text editor using jQuery, I am using a jQuery plugin (listed below) to create this tutorial. There is many features in this plugin like embed image, support mobile devices and dose not force any styling and many more you can get in plugin page.

How to Create textarea into a rich contenttext editor using jQuery

[wpdm_file id=100]DEMO

Plugin i used to make this tutorial nicEdit its a tiny and light weight plugin very easy to integrate.

How to use this plugin:

Simply include js in your html like below and call its method it will detect text area in your webpage and convert it to rich text editor.

<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>

jQuery method to call:

I am defining few methods to initialize this rich text editor on text area.

<script type="text/javascript">
        bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); // convert all text areas to rich text editor on that page

        bkLib.onDomLoaded(function() {
             new nicEditor().panelInstance('area1');
        }); // convert text area with id area1 to rich text editor.

        bkLib.onDomLoaded(function() {
             new nicEditor({fullPanel : true}).panelInstance('area2');
        }); // convert text area with id area2 to rich text editor with full panel.
</script>

Above jQuery initialize methods and create rich text editor.

Altogether

Complete page source here.

<!DOCTYPE html>
<html>
<head>
  <title>How to Create textarea into a rich content/text editor using jQuery</title>  
  <script type="text/javascript" src="nicEdit-latest.js"></script>
  <script type="text/javascript">
//<![CDATA[
  bkLib.onDomLoaded(function() {
        new nicEditor({maxHeight : 200}).panelInstance('area');
        new nicEditor({fullPanel : true,maxHeight : 200}).panelInstance('area1');
  });
  //]]>
  </script>
</head>
<body>
<h4>How to Create textarea into a rich content/text editor using jQuery</h4>
<div id="sample">
  <h4>Simple textarea</h4>  
  <textarea name="area" id="area" style="width:70%;height:200px;">
       Some Initial Content was in this textarea
  </textarea>
  <h4>textarea with complete panel</h4>
  <textarea name="area1" id="area1" style="width:70%;height:200px;">
       Some Initial Content was in this textarea
  </textarea>
</div>
</body>
</html>

A demo and code to download available for free.

[wpdm_file id=100]DEMO

I hope it helps you please don’t forget to share it with your friends.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

15 responses to “How to Create textarea into a rich content/text editor using jQuery”

  1. Satinder says:

    Could have been more useful if we had an image manager and source editor

  2. kaya says:

    when use this editor after submit my form my textarea submited empty.
    what is problem?

  3. Problem Ask says:

    picture or photo how can i upload to my server

  4. Javi Peña says:

    and where I set the folder for images?

  5. php fresher says:

    how can i send HTML contents though this editor

  6. gabrouze says:

    Good post.
    In my framework, i use tinymce and responsive filemanager to manage files and folders.

  7. nandha says:

    Where all the images are storing

  8. nandha says:

    Where all the images are storing

  9. How to insert the data of editor in mysql database?

  10. How to insert the data of editor in mysql database?

Leave a Reply

Your email address will not be published. Required fields are marked *