Finally – a Word Count plugin for CKEditor.  After much searching, and finding nothing, I developed a quick and basic word count plugin for CKEditor.

Tested in Internet Explorer 8, Firefox 3.5, Google Chrome 4, Safari 4

Try the demonstration

Installation:

1. Download the CKEditor Word Count Plugin
2. Upload the /wordcount folder to your /ckeditor/plugins folder
3. Edit your CKEditor configuration file (usually /ckeditor/config.js):
   1. CKEDITOR.editorConfig = function(config) {
   2. config.extraPlugins = ‘wordcount’;
   3. };
4. For your CKEditor instance, use the following HTML markup (‘content’ can be any element name you wish, so long as the hidden field has its element name in the format ‘elementWordCount’)
   1. <label for="content">Content</label>
   2. <textarea class="ckeditor" name="content"></textarea>
   3. <input name="contentWordCount" type="hidden" value="250" />

   Word Limit: If you don’t want to display a word limit, don’t include the hidden input tag, or set its value to zero.

5. Download jQuery and include it on your web page, between the head tags:
   1. <script src="jquery/jquery.1.4.min.js" type="text/javascript"><!–mce:0–></script>

Known Bugs / Issues:

1. The word count can be a few words out – this appears to happen between paragraph tags.
2. Pasting large chunks of copy that exceeds the word limit sometimes causes issues, whereby the additional content isn’t always removed.
3. I’ve only tested this using the HTML markup specified above (it should work in other methods – please let me know if it does / doesn’t)
4. Multiple instances of the CKEditor on a single page may cause issues with word counts.

I’m hoping to keep this plugin updated and publish some fixes within the next few weeks – so if there are any other issues, please leave a comment to let me know.

Download:

Download Plugin, CKEditor, jQuery and example web page.

I had an issue with destroying CKEdtitor instances — sometimes it would raise an error:
i.contentWindow is null
which, corresponds to ckeditor/_source/core/dom/element.js:1331:
return $ && new CKEDITOR.dom.document( $.contentWindow.document );

It turned out to be triggered by the Word Count plugin’s use of “setTimeout” and “getData”. The editor had been destroyed before the timeout triggered to run getData.

I hope this helps someone else!

Where do I put the HTMl for the CKEditor instance? I’m using CKEditor with a Drupal module. Would it be different there? Thanks for the help. And thanks for this plugin. Hope it works, because it could be very useful. Thank You. Jeremy

Hi, I made a couple of changes to your script which I find improves performance when there are a large amount of words (600+) and also seems to help a bit with the ‘few words out’ bug.

The changes are to use a different technique for stripping html (use the browser itself) and to add a trim and a regex based split to the GetWordCount function. Relevant parts included below:

/**
* Takes the given HTML data, replaces all its HTML tags with nothing, splits the result by spaces,
* and outputs the array length i.e. number of words.
*
* @param string htmlData HTML Data
* @return int Word Count
*/
function GetWordCount(htmlData) {
return strip(htmlData).trim().split(/\s+/).length;
}

function strip(html)
{
var tmp = document.createElement(“DIV”);
tmp.innerHTML = html;
return tmp.textContent||tmp.innerText;
}