gistfile1.js

var simpleWYSIHTML5 = {
    "font-styles" : false, // Font styling, e.g. h1, h2, etc.
    "emphasis"    : true,  // Italics, bold, etc.
    "lists"       : false, // (Un)ordered lists, e.g. Bullets, Numbers.
    "html"        : false, // Button which allows you to edit the generated HTML.
    "link"        : true,  // Button to insert a link.
    "image"       : false, // Button to insert an image.
    "color"       : false, // Button to change color of font
    "stylesheets" : []
};

var wysihtml5MaxLength = function(wysihtml5, max) {
    var $counter,
        $wrap,
        $sep,
        $max;
    var ready = false;
    var interval;

    var init = function() {
        if (!wysihtml5.editor) {
            wysihtml5 = $(wysihtml5).wysihtml5(simpleWYSIHTML5).data("wysihtml5");
        };

        // dont prepare the counter until the editor is loaded because we hook it into the toolbar
        wysihtml5.editor.on('load', load);

        // instead of binding into the change, paste, command etc. events we just work with an interval
        // this is also because there's no decent keydown event ...
        wysihtml5.editor.on('focus', focus);
        wysihtml5.editor.on('blur', blur);
    };

    var load = function() {
        $counter = $('<input type="text" disabled="true" class="input-mini" style="width: 30px; font-size: 13px; line-height: 18px; height: 10px;  text-align: right;" />');
        $sep     = $('<span> / </span>');
        $max     = $('<strong />').html(max);
        $wrap    = $('<li style="font-size: 13px;" class="btn" />');

        $wrap.append($counter).append($sep).append($max);

        wysihtml5.toolbar.append($wrap);

        ready = true;
        doCount();
    };

    var getText = function(obj) {
        return obj.textContent || obj.innerText || "";
    };

    var doCount = function() {
        var text = getText(wysihtml5.editor.composer.element);
        var cnt = text.length;

        if (ready) {
            $counter.val(cnt);

            if (cnt >= max) {
                $counter.css({'color' : '#CC0000', 'border-color': '#CC0000'});
            } else {
                $counter.css({'color' : '#2BA949', 'border-color': '#2BA949'});
            }
        }
    };

    var focus = function() {
        interval = setInterval(doCount, 100);
    };

    var blur = function() {
        clearInterval(interval);
    };

    init();
};