Integrating a CKEditor plugin with Drupal 9

At Velir, we take the content authoring experience seriously. That's why we updated and released a module for Drupal 9 called Wordcount. The module integrates a plugin for CKEditor that shows you how many words, paragraphs, or characters you have entered in the editor. It also offers additional options like setting character input limits or counting HTML or spaces as characters.

Wordcount is a handy tool for content authors who create teasers or promotional items. It can help them keep their text to a certain length with a policy they can enforce for all authors. The module can also be simply used as a guideline to inform content authors how much text they've put into editor fields.

Read more: How does Acquia Site Studio empower content marketers in Drupal?

Integrating Wordcount with Drupal

The majority of CKEditor plugins only need to provide three things to Drupal: where the CKEditor Javascript plugin is located on the file system, the button(s) to display on the CKEditor toolbar, and any configuration to pass to the Javascript plugin when it is being initialized.

The Wordcount plugin has an array of options to configure, so you need to expose these options in Drupal.

You need to extend the core CKEditorPluginBase class and implement a few methods from the interface:

• getFile
• getConfig
• getButtons
• settingsForm

You also need to annotate your class definition with the @CKEditorPlugin annotation tag so it's discovered and recognized as an editor plugin.

namespace Drupal\ckwordcount\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\ckeditor\CKEditorPluginConfigurableInterface;
use Drupal\ckeditor\CKEditorPluginContextualInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "wordcount" plugin.
 *
 * @CKEditorPlugin(
 *   id = "wordcount",
 *   label = @Translation("Word & Character Count")
 * )
 */
class Wordcount extends CKEditorPluginBase implements CKEditorPluginConfigurableInterface, CKEditorPluginContextualInterface {

  /**
   * {@inheritdoc}
   */
  public function getButtons() {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    return file_exists(DRUPAL_ROOT . '/libraries/wordcount/plugin.js') ? 'libraries/wordcount/plugin.js' : 'libraries/ckeditor-wordcount-plugin/wordcount/plugin.js';
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    $settings = $editor->getSettings();

    return [
      'wordcount' => [
        'showRemaining' => !empty($settings['plugins']['wordcount']['show_remaining']) ? $settings['plugins']['wordcount']['show_remaining'] : FALSE,
        'showParagraphs' => !empty($settings['plugins']['wordcount']['show_paragraphs']) ? $settings['plugins']['wordcount']['show_paragraphs'] : FALSE,
        'showWordCount' => !empty($settings['plugins']['wordcount']['show_word_count']) ? $settings['plugins']['wordcount']['show_word_count'] : FALSE,
        // additional code removed for demonstration purpose
      ],
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function settingsForm(array $form, FormStateInterface $form_state, Editor $editor) {
    $settings = $editor->getSettings();

    $form['enable'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('Enable the counter'),
      '#default_value' => !empty($settings['plugins']['wordcount']['enable']) ? $settings['plugins']['wordcount']['enable'] : FALSE,
    ];

    $form['show_remaining'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('Show remaining'),
      '#default_value' => !empty($settings['plugins']['wordcount']['show_remaining']) ? $settings['plugins']['wordcount']['show_remaining'] : FALSE,
    ];

    $form['show_paragraphs'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('Show the paragraphs count'),
      '#default_value' => !empty($settings['plugins']['wordcount']['show_paragraphs']) ? $settings['plugins']['wordcount']['show_paragraphs'] : FALSE,
    ];

    $form['show_word_count'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('Show the word count'),
      '#default_value' => !empty($settings['plugins']['wordcount']['show_word_count']) ? $settings['plugins']['wordcount']['show_word_count'] : FALSE,
    ];

    // additional code removed for demonstration purpose
    return $form;
  }

}

For readability's sake, some code from this procedure was redacted. You can view the full code here. 

Configuring the Editor Instance

With the code place, Drupal will register the plugin and expose the options form you set with settingsForm above when you configure an instance of CKEditor in a text format. The form below is generated from the code in the example:

Now you can configure this with different settings for each text format using CKEditor. That way on a site, you can enforce the rules above for content authors and help them stick to content guidelines.

When enabled, the tracker will now appear at the bottom of the CKEditor instance pane for authors:

In addition, you can 'lock' the editor when the input limit is reached. This will prevent a content author from adding additional text to the editor until the input criteria are satisfied.

Get Wordcount for Drupal 8 or 9

You can download the module for Drupal 8 or 9 and start using it today.

Read more of our thoughts on Acquia and Drupal or get in touch to see how we can help you optimize your Drupal content authoring experience.