Limiting length of text and including character count

You can retrieve all the data into a string on the javascript side:

var str = CKEDITOR.instances.editor1.getData();

Then you could just use the string object's length property:

alert(str.length);

This works because the getData function returns all the markup and content as one string, so the length will return the size of the string, including all markup.

Of course, for this to be useful, you would probably want to tie into the key, keydown, or keyup event fired by CKEditor. I have not had the chance to test this, but it should look something like:

var charCount= document.getElementById("charCount");

/* attach event to the specific editor (should be different counts for each editor, although this code isn't perfect in that regard [you would need a different span displaying the count for each editor instance, for example]) */

CKEDITOR.on("keydown", function(event) 
{
     var curVal = charCount.value; //get current value
     curVal += 1; //add one (this event should fire on each keydown)
     charCount.value = curVal; //update the span to show the current number of characters
});

I will tinker with this a little bit and get back to you with some code that is confirmed to work, but otherwise anyone feel free to correct me if I got anything wrong!

As a final note, once you have the count, you will have to add a bit more code to do whatever you want to have done when the user hits the limit.

Edit
Well just worked out the code for you and determined this to work pretty well, although I have updated it to work better (I didn't initially follow my own advice )

var charCount = document.getElementById("charCount");
CKEDITOR.instances.editor1.on("key", function (event)
{
        charCount.innerHTML = CKEDITOR.instances.editor1.getData().length;
});

Please note that this is counting the extra spaces inserted by the editor, so it is up to you if you wish to count more than one space character per contiguous spaces.

Good luck!

Yavin thanks for the Post but after attaching a listener to the "key" event (CKEDITOR.instances.editor1.on("key", function (event)) I find its buggy. The event does not fire properly.

  
CKEDITOR.instances.txtEditor.on("key", function() {

    var txt= CKEDITOR.instances.txtEditor.getData();
    alert(txt);
})

In the above example the text in the document is not properly shown. Is there any other solution or am I doing anything wrong?

When you use the getData function, you are getting everything including tags and spacing. The .length property of a javascript string yields the character count including empty spaces. So there is really nothing wrong because it does not count newlines or anything like that, you should only be dealing with the code tags etc.