Implementing Word Count in Drupal 10 with CKEditor 5 for Improved CSR Operation

Goals: Custom word count feature implementation in CKEditor 5

The primary goal of the project was to implement the Word Count feature in our client’s CSR initiative website without compromising security. The website included custom forms requiring a specific word count function that is only available in CKEditor 4. However, CKEditor 4 relies on inline JavaScript execution, which is incompatible with our strict Content Security Policy (CSP Guidelines). CSP is crucial to ensure web application security, as it helps prevent cross-site scripting (XSS) attacks by controlling the sources of executable scripts. To help our clients and keep their website secure, we worked on implementing the desired word count feature on CKEditor 5.

Solutions

1. Installing CKEditor 5

Given the incompatibility and security issues with CKEditor 4, we proceeded with the installation of CKEditor 5. This ensured compliance with our CSP requirements, as CKEditor 5 does not rely on inline JavaScript.

2. Exploring modules

We evaluated several modules, such as 'MaxLength’ and 'ckwordcount', to see if they could fulfill our word count requirements. While these modules provided some functionality, they did not meet our needs, especially regarding real-time word counting and user notifications when limits were exceeded.

3. Custom validation

Ultimately, we developed a custom solution for word count validation. This included both backend and JavaScript components that were tailored to work seamlessly with CKEditor 5. Key steps included:

    a. Customizing the 'textfield_counter' module

We adapted this module to count words instead of characters. This involved modifying the module's logic to count words in real-time as users typed.

    b. User notification system

We implemented a popup message system to alert users when they exceeded the word limit. This feature was crucial for providing immediate feedback and helping content editors follow the word limits efficiently.

Outcomes

The custom implementation of the word count feature in CKEditor 5 for our client's Drupal 10 website was successful, leading to the following results:

CSP compliance: By avoiding inline JavaScript usage, our solution adhered to CSP guidelines, ensuring web application security.

Functional word count: The customized solution provided the necessary word count functionality, allowing content editors to work within specific limits.

Enhanced user experience: Real-time feedback through popup messages improved the user experience, making it easier for editors to manage their content.