CODEWITHSUNDEEP
javascriptphpdrupal-7ckeditorckeditor-wordcount
snarf1974
snarf1974

Reputation: 5

Ckeditor Wordcount plugin to target specific fields

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:

ckeditor.config.js

Using CKEDITOR.replace I did the following:

  CKEDITOR.replace('edit-body-und-0-summary',
      {
          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

Upvotes: 0

Views: 820

Answers (1)

snarf1974
snarf1974

Reputation: 5

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.

Upvotes: 0

Related Questions