How To Detect Length In TinyMCE

How To Detect Length In TinyMCE

When it comes down to browser WISIWYG editors, TinyMCE is one of my favorites. Don’t get me wrong, I would personally rather write is straight up HTML or reStructured, but for clients I feel this it is a great tool.

But when integrating TinyMCE, you have to worry about the length of the data because you have database limitations. So as a user is typing, you need to be able to detect not only the length of the text that the user has entered, but also the length of the HTML that TinyMCE is adding behind the scene.

Here is a code segment that I used the other to display the length to the user and then turns red if they go over the maximum length. I use jQuery in this example, but you can do whatever you want in the function.

tinyMCE.init({
    // ... settings ...
    handle_event_callback: function() {
        $('#characters').val(tinyMCE.getContent().length);
        if ($('#characters').val() > 500) {
            $('#characters').css('color', 'red').css('border-color', 'red').css('background-color', '#fdd');
        } else {
            $('#characters').css('color', '#000').css('border-color', '#777').css('background-color', '#eee');
        }
    }
});