CKEditor 5 word count: show live totals and check the final submission

Consider an original speaker-description form with an application rule of no more than 80 words. The author needs a visible count while editing, but the application also needs to check the actual description captured by Submit. Neither the length of the HTML string nor a stale display label answers that question.

Mount the counter for the current editor

Follow the current installation instructions for the application's CKEditor version and license configuration. Import WordCount from ckeditor5 and add it to the existing plugin list. Retain the other plugins, root configuration, and styles needed by the editor.

Provide a destination outside the editable content:

<div id="description-count" aria-live="polite"></div>

After initialization resolves, attach the plugin's self-updating container:

const counter = editor.plugins.get('WordCount');
document.querySelector('#description-count')
  .appendChild(counter.wordCountContainer);

Here editor is the initialized instance for this description. Mount the counter once. If the application destroys and recreates the editor when changing records, remove the old interface and attach the new instance's container. A visible counter left beside a different document is misleading even when it continues to update.

Count the document rather than its HTML markup

This short fixture illustrates why raw source length is unsuitable:

<p>Ren repairs <strong>field recorders</strong>.</p>

The tags describe formatting; they are not words in Ren's description. Reading editor.getData().length counts markup characters and does not produce the plugin's word or character count.

Use the plugin's properties for the current totals:

const currentStatistics = {
  words: counter.words,
  characters: counter.characters
};

Make the application's limit explicit: words and characters are different policies. A receiving system may apply its own counting rules, especially for punctuation, line breaks, or language-specific segmentation. If that system is authoritative, test representative descriptions against it instead of promising that every external form will count identically.

Use live updates as feedback

For a custom label, configure a callback inside the existing initialization configuration:

const wordCountConfiguration = {
  wordCount: {
    onUpdate: stats => {
      document.querySelector('#description-status').textContent =
        `${stats.words} of 80 words`;
    }
  }
};

Provide #description-status in the application's interface before initialization if using this fragment. Merge the configuration into the real editor setup; the object alone does not initialize anything. The 80-word limit is this example's product rule, not a CKEditor default.

Use an over-limit message to help the author shorten the description. Displaying a red total or disabling a button in a delayed callback does not provide an authoritative submission check.

Check at the same moment you capture the submission

In the application's Submit handler, inspect the plugin property and capture the current data together:

function captureDescription(editor, maximumWords) {
  const wordCount = editor.plugins.get('WordCount');
  const words = wordCount.words;

  if (words > maximumWords) {
    throw new Error(`Description exceeds ${maximumWords} words.`);
  }

  return { html: editor.getData(), words };
}

Call this with the application's configured limit and display any rejection beside the description. Send the captured HTML through the existing save route. Server-side validation must enforce the submission policy too; the client total is not trusted proof that a request meets it.

For the speaker fixture, test an allowed description, one just over the limit, and a rapid final edit followed immediately by Submit. Check that the handler inspects the current content rather than the previous callback value. Avoid silently truncating the description, which can remove a qualification or leave a broken sentence.

The CKEditor document save guide covers capturing and reopening editor data. Finish this form by reopening the submitted description and confirming its wording, then compare the final total with the rule actually used by the receiving application.