WYSIWYG Editor (jHtmlArea enhancement needed)

Question

Working on a very data-intensive website project with lots of jQuery/JavaScript and we are writing a lot ourselves but also using a number of plugins, but even when we add a plugin we tend to then need to add even more functionality to it. In one instance we need to allow the user to embolden, italicize or underline text they select so we are using the jHtmlArea plugin (http://jhtmlarea.codeplex.com) and it does work but we also need to show a character counter on it that respects the maxlength on the associated TEXTAREA element.

I have found a jsfiddle (nXMqc) that has a character counter based on the TEXTAREA maxlength. But I need to get it to work with the jHtmlArea plugin. My attempts so far have been fruitless.

Answer 1

I was able to acheive this by updating the javascript in jHtmlArea-0.7.5.js

Particularly, the following:

   ...
   updateTextArea: function () {
        this.textarea.val(this.toHtmlString());

        //Add the following javascript
        var val = $(this.textarea).val();
        var vallength = val.length;
        $("#counter-div").html(vallength);

    },...

Then you will able to use <div id="counter-div"></div> right under your textarea.

There will be some additional modifications if you want to have multiple jHtmlAreas on a single page. Basically counter-div will need to be uniquely identified to the textarea you are modifying.