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

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.

jQuery method to call:

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

Above jQuery initialize methods and create rich text editor.


Complete page source here.

A demo and code to download available for free.

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:
  • Satinder

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

    • huzoorbux

      Both options are available in this code, Check 2nd option with fullPanel.

  • kaya

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

    • Pradeep Kumar

      Hi.I too have the same problem. Have you find any steps to rectify it?

  • Problem Ask

    picture or photo how can i upload to my server

  • Javi Peña

    and where I set the folder for images?

  • php fresher

    how can i send HTML contents though this editor

  • gabrouze

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

  • nandha

    Where all the images are storing

  • nandha

    Where all the images are storing

  • How to insert the data of editor in mysql database?