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 evan

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">
                <textarea id="textcounter" name="textcounter">

                    <img src="http://placekitten.com/512/512" />                    
            
                </textarea>
        </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:700px;
    height: 700px;
    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', {
        height: 700,
        disableObjectResizing: true,
        toolbar: [['Source'], ['Cut', 'Copy', 'PasteText'], ['Undo', 'Redo', '-', 'SelectAll', 'RemoveFormat'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'], ['SpecialChar']]
    });
    //global for editor instance
    global = editor;
});