I'm using the CKEditor - WYSIWYG HTML editor Drupal 7 module and wordcount plugin. I've added the wordcount plugin file in the ckeditor plugins directory and got it working, however my config max word and character count etc is the same for all fields. I would like to specify different max word and character counts for specific fields. Here is my config:


Using CKEDITOR.replace I did the following:

          extraPlugins: 'wordcount',
          wordcount: {
              showCharCount: true,
              maxCharCount: 123

This worked, but after refreshing the page it went back to the global max word and character count. The Textrea ID is edit-body-und-0-summary but this tag is repeated elsewhere in the page.

How do I go about adding a unique ID to the textarea tag and having different word counts for different fields e.g. Summary and Body fields

  • What is the module/process adding the textareas to the form? There shouldn't be any elements with identical IDs, let alone form fields. Maybe pasting some of the html from the form would help. That being said, once you figure out the issue with the id's you could loop through the fields with jQuery's each method: $('textarea').each(function(index, element) {CKEDITOR.replace($(this).attr('id'));}); (untested). – runswithscissors Dec 1 '19 at 22:05
  • @runswithscissors Thanks for your answer, however I managed to come up with a solution below. – snarf1974 Dec 5 '19 at 18:03

I figured it out, hope this helps anyone else out there.

I added the following to my Adminimal Sub theme to add a class to the summary textarea:

function adminimal_sub_form_alter(&$form, &$form_state, $form_id) { 
 if (isset($form['#node']) && $form['#node']->type == 'article') {
 // Add class to body textarea for various content types. This is used for the Ckeditor wordcount plugin to target summary textarea. 
   $form['body']['und']['0']['summary']['#attributes']['class']['0'] = 'article-summary';

Then downloaded the Ckeditor 4 Wordcount plugin and saved it in the plugins directory (sites/all/libraries/ckeditor/plugins).

In the Drupal UI I went to configuration > CKEditor Filtered HTML (edit) and in the Custom Javascript configuration under Advanced options I added a path to my ckeditor.config.js (config.customConfig = '/sites/all/themes/global/js/ckeditor.config.js';).

This is my ckeditor.config.js:

CKEDITOR.editorConfig = function(config) {

 if (this.element.hasClass('article-summary')) {
 config.wordcount = {
    showCharCount: true,
    maxCharCount: 170
// Make CKEditor's edit area as high as the textarea would be.
 if (this.element.$.rows > 0) {
    config.height = this.element.$.rows * 20 + 'px';

Here I can set the maxwordcount and loads more besides, but for this project only needed the maxwordcount. This way if the Drupal Ckeditor module gets updated this file will not be affected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.