How to add character count to CKEditor

Home > Search > How-to
  by

If building a new editor using the CKBuilder from http://ckeditor.com/, there is no need to follow the numbers steps below. If adding the Word Count & Char Count plugin to an already established CKEditor, follow the numbered steps below.

Note: If you will be hacking some of the JavaScript, you probably will not want to use the CKBuilder, because this will place the JavaScript of the Word Count & Char Count plugin in the ckeditor.js file located at /web/server/root/ckeditor/ckeditor.js. The JavaScript for the Word Count & Char Count plugin in the ckeditor.js file is different than the JavaScript used when manually adding the Word Count & Char Count plugin.  The JavaScript for the Word Count & Char Count plugin in ckeditor.js is difficult to work with and challenging to read. For these reasons, if you plan to hack some of the JavaScript, it is definitely better to follow the numbered steps below.

  1. Download the Word Count &  Char Count plugin from http://ckeditor.com/addon/wordcount or https://github.com/w8tcha/CKEditor-WordCount-Plugin. This will download a folder such as wordcount_version.zip or CKEditor-WordCount-Plugin-master.zip to your Downloads folder.
  2. Download the Notification plugin from http://ckeditor.com/addon/notification. This will download a folder such as notification_version.zip to your Downloads folder.
  3. Extract the .zip for both the Word Count & Char Count and Notification plugin. After extraction, you should have a folder named wordcount and a folder named notification.
  4. Move both the wordcount folder and the notification folder to /web/server/root/ckeditor/plugins/.
  5. In the config.js file, which is located at /web/server/root/ckeditor/, add the line config.extraPlugins = 'wordcount,notification';. Below is an example of what your config.js file might look like after adding config.extraPlugins = 'wordcount,notification';
CKEDITOR.editorConfig = function( config ) {
  config.extraPlugins = 'wordcount,notification';
  config.toolbar [
  et cetera . . .
  ];
};

There now should be text in the bottom right hand corner of your CKEditor which counts the number of Paragraphs and number of Words in your CKEditor.

There are some instances where it makes more sense to count the characters, including spaces and HTML. For example, if the text, images and HTML in your CKEditor gets uploaded to a SQL table, the SQL table will have a limit on the maximum allowed characters. Let's say for example your SQL table allows 8,000 characters maximum. It would be better to have the Word Count & Char Count plugin shows the number of characters (includes spaces and HTML). One way to accomplish this is to add the following to the config.js file located at /web/server/root/config.js. 

config.wordcount = {
  showParagraphs: false,
  showWordCount: false,
  showCharCount: true,
  countSpacesAsChars: true,
  countHTML: true,
  maxWordCount: -1, //negative one means unlimited
  maxCharCount: 8000
};

However, I find it makes more sense to make these revisions in the wordcount plugin.js file, located at /web/server/root/ckeditor/plugin/wordcount/plugin.js. A general rule of thumb is to always make a backup of the original plugin.js file before making changes to the plugin.js file.

//Default Config
var defaultConfig = {
  showParagraphs: false,
  showWordCount: false,
  showCharCount: true,
  countSpacesAsChars: true,
  countHTML: true,
  hardLimit: true,

  //MAXLENGTH Properties
  maxWordCount: -1, //negative one means unlimited
  maxCharCount: 8000,

  et cetera . . .
};

Now, the bottom right hand corner of the CKEditor will show the current count of characters in the CKEditor, and will show that the maximum allowed number of characters is 8000. One issue that might occur when making these changes is that a strange string of text will show at the bottom right-hand corner of CKEditor, such as (with HTML: %charCountHTML%).

In the plugin.js file located at /web/server/root/ckeditor/plugins/wordcount/plugin.js, locate the following code.

if (config.ShowCharCount) {
  var charLabel = editor.lang.wordcount[config.countHTML ? "CharCountWithHTML" : "CharCount"];
  
  defaultFormat += charLabel + " %charCount%";
  if (config.maxCharCount > -1) {
    defaultFormat += "/" + config.maxCharCount;
  }
}

To remove the strange text (with HTML: %charCountHTML%), remove charLabel + from the code. I also choose to change "/" to " of ", which places the word of instead of a / at the bottom right hand corner of CKEditor.

if (config.ShowCharCount) {
  var charLabel = editor.lang.wordcount[config.countHTML ? "CharCountWithHTML" : "CharCount"];
  
  defaultFormat += " %charCount%";
  if (config.maxCharCount > -1) {
    defaultFormat += " / " + config.maxCharCount;
  }
}

 



Add a Comment




We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.




Please enter in the box below so that we can be sure you are a human.




Comments


February 16th, 2018 by Rajesh
Really helpful.


February 16th, 2018 by Jeremy (moderator)
I am glad it was helpful. Thanks Rajesh!


December 6th, 2018 by priya
It didnt work for me. Followed all the steps