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
<textarea></textarea>

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
$('textarea').htmlarea();

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:
$('#txtEditor').htmlarea();

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

Comments

Nuallian Sep 3, 2014 at 12:32 PM 
@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 2: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 6:36 PM 
hi..
can you please explane where to put this line $('#txtEditor').htmlarea();
and how?

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

nverwer Nov 22, 2012 at 10: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">
$(function(){
$('#editor').htmlarea({})
});
</script>

beesquare Oct 4, 2012 at 12:25 PM 
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