CKEditor Character Count (charcount) is not working

Question

If anyone has any experience with adding a charcount (Characters count) plugin for CKEditor, I sure could use a hand. This is my understanding of what needs to be done to add a plugin to CKEditor to count characters.

1. Create a plugin.js file which has the JavaScript to count the characters, and place this file at /web/server/root/ckeditor/plugins/charcount/plugin.js
2. Add the line config.extraPlugin = 'charcount'; to the config file at /web/server/root/ckeditor/config.js
3. Style the Character Count by adding CSS to the file at /web/server/root/ckeditor/skin/skin_name/editor.css.

Here is the plugin.js file I am using. Note: This JavaScript comes from the first post from this thread on the CKEditor forum.

CKEDITOR.plugins.add( 'charcount',
{
init : function( editor )
{
  var defaultLimit = 'unlimited';
  var defaultFormat = '<span class="cke_charcount_count">%count%</span> of <span class="cke_charcount_limit">%limit%</span> characters';
  var limit = defaultLimit;
  var format = defaultFormat;

  var intervalId;
  var lastCount = 0;
  var limitReachedNotified = false;
  var limitRestoredNotified = false;


  if ( true )
  {   
     function counterId( editor )
     {
        return 'cke_charcount_' + editor.name;
     }

     function counterElement( editor )
     {
        return document.getElementById( counterId(editor) );
     }

     function updateCounter( editor )
     {
        var count = editor.getData().length;
        if( count == lastCount ){
           return true;
        } else {
           lastCount = count;
        }
        if( !limitReachedNotified && count > limit ){
           limitReached( editor );
        } else if( !limitRestoredNotified && count < limit ){
           limitRestored( editor );
        }

        var html = format.replace('%count%', count).replace('%limit%', limit);
        counterElement(editor).innerHTML = html;
     }

     function limitReached( editor )
     {
        limitReachedNotified = true;
        limitRestoredNotified = false;
        editor.setUiColor( '#FFC4C4' );
     }

     function limitRestored( editor )
     {
        limitRestoredNotified = true;
        limitReachedNotified = false;
        editor.setUiColor( '#C4C4C4' );
     }

     editor.on( 'themeSpace', function( event )
     {
        if ( event.data.space == 'bottom' )
        {
           event.data.html += '<div id="'+counterId(event.editor)+'" class="cke_charcount"' +
              ' title="' + CKEDITOR.tools.htmlEncode( 'Character Counter' ) + '"' +
              '>&nbsp;</div>';
        }
     }, editor, null, 100 );

     editor.on( 'instanceReady', function( event )
     {
        if( editor.config.charcount_limit != undefined )
        {
           limit = editor.config.charcount_limit;
        }

        if( editor.config.charcount_format != undefined )
        {
           format = editor.config.charcount_format;
        }


     }, editor, null, 100 );

     editor.on( 'dataReady', function( event )
     {
        var count = event.editor.getData().length;
        if( count > limit ){
           limitReached( editor );
        }
        updateCounter(event.editor);
     }, editor, null, 100 );

     editor.on( 'key', function( event )
     {
        //updateCounter(event.editor);
     }, editor, null, 100 );

     editor.on( 'focus', function( event )
     {
        editorHasFocus = true;
        intervalId = window.setInterval(function (editor) {
             updateCounter(editor)
        }, 1000, event.editor);
     }, editor, null, 100 );

     editor.on( 'blur', function( event )
     {
        editorHasFocus = false;
        if( intervalId )
           clearInterval(intervalId);
     }, editor, null, 100 );
  }
} 
});

Here is my config.js file. Notice I do have config.extraPlugin = 'charcount'; near the beginning of this file.

CKEDITOR.editorConfig = function( config ) {
config.extraPlugin = 'charcount';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
    { name: 'document', items : [ 'Source','Save' ] },
    { name: 'editing', items : [ 'Find','Replace','Scayt', 'TextColor' ] },
    { name: 'insert', items : [ 'Image','CodeSnippet','Table','HorizontalRule' ] },
    { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
    { name: 'tools', items : [ 'Maximize','ShowBlocks','-' ] }
 ]; 
};

I added the following to the bottom of my editor.css file.

.cke_skin_kama .cke_charcount {
display:block;
float:right;
margin-top:5px;
margin-right:3px;
color:#60676A;
}
.cke_charcount span.cke_charcount_count,
.cke_charcount span.cke_charcount_limit  {
font-style: italic;
}

Here is my stage.html file.

<script src="ckeditor/ckeditor.js"></script>
<textarea id="editor1"></textarea>
<script> CKEDITOR.replace('editor1'); </script>

Here is a screen shot of the expected outcome, where the bottom right hand corner of my CKEditor should have text which counts the characters.

Here is a screen shot showing that my CKEditor does not have a character count.

There are some other similar threads on this. However, the similar threads add a button to the CKEditor toolbar. The JavaScript I am using does not add a button to the toolbar, and instead displays text at the bottom right-hand corner of CKEditor, which is what I am attempting to achieve. Hopefully this difference makes this post unique enough to not be considered a duplicate.

If it helps, my Web Server OS is Linux Mint version 17.2.

Answer 1

I was not able to figure out what the issue is with the JavaScript I posted in my original question. However, I did come across a solution to this issue, which I want to share here in case others happen upon this post with a similar issue. I found a plugin for CKEditor called the Word Count & Char Count plugin. This plugin can be downloaded from http://ckeditor.com/addon/wordcount or https://github.com/w8tcha/CKEditor-WordCount-Plugin. This plugin totally works, and display the number of words, paragraphs and/or characters in CKEditor.