jHTMLarea WYSIWYG Editor



Anytime you are using a “plugin” for a website, there’s always that splinter of worry in the back of your mind that you’ll install everything, and it won’t work.

I recently installed jHTMLarea into a website I was creating and I’m happy to let you know – this lightweight plugin really works well! You can also customize the buttons at will.

I wanted to add some additional tips to their documentation that might help you out.


To actually run the plugin, you’ll need several files. The first two need to be included in the page you’ll be showing the editor in, while the last ones just need to be uploaded.

  1. <script type=”text/javascript” src=”jquery/jHtmlArea-0.7.5.js”></script>
  2. <link rel=”Stylesheet” type=”text/css” href=”css/jHtmlArea.css” />
  3. File (in the same folder as the stylesheet): jHtmlArea.Editor.css
  4. image #1 (in the same folder as the stylesheet):  jHtmlArea_Toolbar_Group__Btn_Select_BG.png
  5. image #2 (in the same folder as the stylesheet):  jHtmlArea_Toolbar_Group_BG.png
  6. image #3 (in the same folder as stylesheet): jHtmlArea.png

Referencing the TextArea

Their documentation is pretty complete when implementing the advanced usage (creating your own buttons, removing buttons, etc), so you can copy the advanced code off their site here.

But sometimes you’ll want to reference the TextArea text and do something with it. To do this, use the following code, added under the “loaded” function:

loaded: function() {
 $.myControl = { jhtmlarea: this };

Line 2 above puts the jHTMLarea into “$.myControl”, afterwhich is extremely easy to use. I found this solution on Stack Overflow, in an answer by Zach. Thanks Zach!

Then you’ll need to reference it by the following:


Notice we use the ‘$’ sign before the parenthesis, and then repeat it when we reference “$.myControl”. After you reference the correct portion, you can then do whatever you want.

For Example:

$($.myControl.jhtmlarea.editor.body).bind('keyup', function() {  //count inputted characters });


$($.myControl.jhtmlarea.editor.body).blur(function() { //save the text when the user moves the focus off });

Note that the last item: “.blur” will not work in Firefox. I’ll post a solution next week!

That’s all there is to it! Have Fun!