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.

HTML

<script src="http://openconcept.ca/sites/all/libraries/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:960px;
    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() {
    CKEDITOR.plugins.add( 'img',
{
    init: function( editor )
    {
        editor.addCommand( 'insertImg',
            {
                exec : function( editor )
                {    
                    var imgurl=prompt("Insert url image");
                    editor.insertHtml('<img src="'+imgurl+'" />');
                }
            });
        editor.ui.addButton('img',
        {
            label: 'Insert img',
            command: 'insertImg'
        } );
    }
} );
    //set up the editor instance for ckeditor
    var editor = CKEDITOR.replace('textcounter', {
        toolbar: [['img'],['Source']],
        extraPlugins: 'img',
    });
    //global for editor instance
   
    //set timed interval to run function

});