Display the jHtmlArea Editor

Requires jQuery

jHtmlArea has only one dependency: jQuery. Since it is a jQuery plugin, it does require you to include the jQuery library within your page.

Display an Editor

To use jHtmlArea, all you need to do is place a stander HTML <textarea> on the page, and execute a single line of JavaScript code (using jQuery) to turn that {<textarea>} into a jHtmlArea editor.

Step 1: Add a <textarea> to the page

Step 2: Add jHtmlArea library, css and images to your website folder structure.

Step 3: Add a reference to the jHtmlArea CSS file to your page
<link rel="Stylesheet" type="text/css" href="style/jHtmlArea.css" />

Step 4: Add a reference to the jHtmlArea library to your page
<script type="text/javascript" src="scripts/jHtmlArea-0.7.0.js"></script>

Step 5: Add single line of JavaScript / jQuery code to turn the <textarea> into a jHtmlArea Editor

Mixing jHtmlArea and Standard TextAreas on Same Page

jHtmlArea and TextAreas can be mixed within the same page since the line of JavaScript / jQuery code to turn a standard <textarea> into a jHtmlArea (as shown above) uses a CSS selector.

Here's some example HTML for two TextAreas:
<textarea id='txtPlain'></textarea>
<textarea id='txtEditor'></textarea>

And, here's the matching JavaScript / jQuery code to turn just the txtEditor TextArea into a jHtmlArea:

Last edited May 5, 2012 at 1:22 PM by crpietschmann, version 5


Nuallian Sep 3, 2014 at 11:32 AM 
@paulstolk, yes you are right, there is a problem with including the latest version. Thank you very much for your remark

paulstolk Jul 27, 2014 at 1:40 PM 
I had a problem getting it to work, but I found the problem; make sure you include the right version.
This documentation says 'jHtmlArea-0.7.0.js', but the current version is 'jHtmlArea-0.8.js'. Check for the right file name in /scripts.

yest Jul 3, 2013 at 5:36 PM 
can you please explane where to put this line $('#txtEditor').htmlarea();
and how?

angelxmoreno Dec 22, 2012 at 5:12 PM 
@beesquare I put mine in the head tag inside a "$(function(){" like @nverwer mentioned.

nverwer Nov 22, 2012 at 9:51 AM 
The best is to do this when the document is ready. Since you have jquery loaded in the page, just use the following script:
<script type="text/javascript">

beesquare Oct 4, 2012 at 11:25 AM 
Hi i am a new php/html/javascript user and this looks wonderful but i have a small problem. Where exactly in the code of my web page do i put this line $('textarea').htmlarea();?

Thank u