CKEditor Character Count

Start typing in the WYSIWYG editor and you will see a real-time count of characters remaining with an animated bar. Also works with paste events.

by erick

HTML

<script src="http://www.vagrantradio.com/demos/ckeditor/ckeditor/ckeditor.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CKEditor with Character Counter</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <section id="wrapper">
            <h1>CKeditor with Character Counter</h1>
            <p>Start typing in the WYSIWYG editor and you will see a realtime count of characters remaining with an animated bar. Also works with paste events.</p>
            <article id="ckinput">
                <div id="counter">140 Characters Maximum
                    <div class="barcount">
                        <div class="bar bluebar"></div>
                    </div><!-- end barcount -->
                    <div id="count"></div>
                </div><!-- end counter -->
                <textarea id="textcounter" name="textcounter"></textarea>
            </article>
        </section>
    </body>
</html>

CSS

* {
    margin:0;
    padding:0;
}
section, article, footer {display:block;}
body {
    font:13px/1.5em Arial, Helvetica, sans-serif;
    color:#000;
}
h1 {font-weight:bold;font-size:24px;}
#wrapper, footer{
    width:580px;
    margin:30px auto;
}
footer {text-align:center;}
h1, p {margin-bottom:20px;}
.red {
    color:#900;
}
#counter {
    font-weight:bold;
    margin-bottom:5px;
}
#count {float:right;margin-right:8px;font-weight:bold;}
.bar {
    width:0px;
    height:16px;
}
.bluebar {
    background:#2098e4;
    background:-moz-linear-gradient(center top , #2098e4, #105cbe);
    background: -webkit-gradient(linear, left top, left bottom, from(#2098e4), to(#105cbe));
}
.redbar {
    background:#cc0000;
    background:-moz-linear-gradient(center top , #cc0000, #900);
    background: -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#900));
}
.barcount {
    height:16px;
    width:150px;
    overflow:hidden;
    border:solid 1px #d3d3d3;
    float:right;
    -webkit-border-radius:0.3em;
    -moz-border-radius:0.3em;
    border-radius:0.3em;
}

JavaScript

jQuery(function() {
    //set up the editor instance for ckeditor
    var editor = CKEDITOR.replace('textcounter', {
        toolbar: [['Source'], ['Cut', 'Copy', 'PasteText'], ['Undo', 'Redo', '-', 'SelectAll', 'RemoveFormat'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'], ['SpecialChar']]
    });
    //global for editor instance
    global = editor;
    //set timed interval to run function
    setInterval("updateCount()", 500);
});

function updateCount() {
    var almost = global.getData();
    var main = almost.length *100;
    var value = (main / 140);
    var count = 140 - almost.length;
    $('#count').html(almost.length);
    if(almost.length <= 140) {
        jQuery('#count').html(count).removeClass("red");
        jQuery('.bar').animate({"width": value+'%'}, 1).removeClass("redbar").addClass("bluebar");
    } else {
        jQuery('#count').html(count).addClass("red");
        jQuery('.bar').animate({"width": '100%'}, 1).removeClass("bluebar").addClass("redbar");
    }
}