Internet, IT and Technology

Word counter in CKEditor 5 on Drupal 9 and 10+

Modules to display the number of words in the Drupal text editor, CKEditor 5.
Drupal & CKEditor 5 logos

A few months after Drupal 11 is released, Drupal 10 is used by 29% of pages that use Drupal. Since Drupal version 9 and earlier CKEditor 4 could be used by default, however, since version 10 it was completely removed. In Drupal 9 you could use CKEditor 4 or CKEditor 5, we had the option of choosing the most appropriate one at our discretion.

The main problem that this change brought was the incompatibility with various modules, which added extra functions to the text editor, some really useful and others not so much. On this page, we can find the list of modules and their status or progress in terms of their compatibility with CKEditor 5. It is detailed if there are equivalent modules for CKEditor 5, or if they are in the planning or development phase.

Word counter in CKEditor 5

In CKEditor 4 we had the CKEditor Wordcount module, which, although it is compatible with Drupal 10, if we install it, it simply will not work, of course, it will be activated without any difficulties or notifications.

In Drupal 10 we have two options, CKEditor 5 Plugin Pack, a module developed by CKSource Holding LTD, the same creators of CKEditor, and CKEditor5 Word Count, a module created by a third party outside the editor and Drupal. Personally, I recommend the CKEditor 5 Plugin Pack module, which includes the word counter as a submodule in the package. The second module also makes use of the official CKEditor library, only in a more simplified way.

Drupal CKEditor 5 Word Count

Configure the module counter CKEditor 5 Plugin Pack

After installing the module with Composer or through the graphical interface. We go to “Extend” in the main menu bar, and in the list of modules we use the search engine and write “CKEditor 5 Word Count” or we can also try with “ckeditor5_plugin_pack_word_count” which is the internal name of the module. Then we continue enabling it, in Drupal this process of activating it is called install.

CKEditor 5 toolbar

To configure it, we go to Configuration › Content authoring › Text formats and editors. In the list of editors that we use, we are going to repeat the following procedure in each of the editors, for example, “Basic HTML”, and in operations we select “Configure”. On the page where all the editor options appear, we look for the section “CKEditor 5 plugin settings”, there if we go to the end the option “Enable the Word Count plugin.” will appear, we select it and choose from the options that appear. Showed right away:

  • Show words and characters count: To show the number of words and characters.
  • Show words count only: To show only the number of words.
  • Show characters count only: To show only the number of characters.

CKEditor 5 enable word count

How the CKEditor 5 Word Count submodule works

Its operation is very basic, and it counts each fragment of text that is separated by a space, for example, it counts numbers and complete words. It also counts code snippets in the case of the content of <code> tags using the same logic.

Example of how the counter works:

  • “1”: 1 word.
  • texto: 1 word.
  • ,: 0 words.
  • "text text: 2 words.
  • <tag>: 1 word.
  • <script>…</script>: 0 words if it is a non-visible element, but if it is displayed as plain text, it will be counted.
  • <p><i style="font-weight: bold">foo</i>bar</p>: 1 word.

Some examples were extracted from the GitHub repository.

At the moment the counter only works in the main CKEditor box, and not in others such as the title or summary. If we want it to work on others, we also have to enable text formats and activate the counter manually for those fields.

Other modules and alternatives

Drupal modules and various alternatives with built-in word count and characters count.

Drupal modules:

  • CKEditor5 Word Count: This module is the only alternative to the official module, it was created by a person outside of Drupal and CKEditor. It only has a word counter and not a character counter, although there is a patch available (Character counter option missing) to enable the character counter. The module is not covered by Drupal's security advisory policy, it must be assumed that it is not because it is a module with very few installations.
  • CKEditor Wordcount: This module is for Drupal 8, 9 and 10, but using CKEditor 4. It requires a special installation procedure, since it has external dependencies.

Tools:

I highly recommend LanguageTool as an alternative. Its main function is spelling and grammar, but it comes with a word and character counter, which shows the data in each text area in which the tool works. For example, it is available as a plugin for Chrome, Firefox, Edge, and more, and it works very well. The only disadvantage of using it as a word counter is that it does not show you the number directly. Instead, you have to click on the icon embedded in the text area every time you want to know the number.

Software:

  • Microsoft 365: Word
  • Google Docs
  • LibreOffice: Writer

Why use a word counter with Drupal?

Drupal does not come with a word counter by default, and in SEO topics the number of words is one of the pillars for creating relevant content. In Drupal 9 and earlier we had it easy with the module mentioned above, but if we talk about Drupal 10, this version came out in December 2022, and the module was recently published in March 2024. It only took 1 year and 3 months, without note that CKEditor 5 was already ready since Drupal 9, only that it was mandatory since version 10.

Why use the counter in the text editor if we have a counter in Word or Google Docs?

It is more practical, the more tools we have on hand and in one place, the better we will work. For example, it would be a lot of waste of time to have to copy all the text between different tools to count words, check spelling, create revisions, etc. If we compare the meager editor that came in Drupal 7 with this powerful text editor, there is simply no comparison. Before it was a valid point, we had to check spelling and grammar in word processors, but now browsers lighten the load a little and already come with tools that add to the tools of content managers.

Observations

The word count is only available in the default editing mode, and is not displayed when viewing the source code with the “Source” button. The number of words is in real time, it is updated as we write. By installing the module through the Pack we will also have other notable features such as To-do lists, the free version of WProofreader which is a grammar and spelling checker, text highlighting, and full screen mode. If we are concerned about the speed of Drupal when installing modules, believe me that is what it is designed for, to be flexible and modular to a surprising level.

If we want to test the counter before installing it, we can do so at this link in the plugin's documentation, where there is an editor embedded in the page.

Conclusions

Since Drupal 9 came out in 2020 I decided to try CKEditor 5, and unfortunately it cost me a lot to have to stop using these features, not essential but useful. But like everything, you have to prepare for the future, even if this is counterproductive at first.

Related content