Ckeditor5 WordCount
This module adds real-time word and character counting to CKEditor 5, providing instant visual feedback to users. It allows for configurable word and character limits, with distinct visual warnings and errors when limits are approached or exceeded.
CKEditor 5 Word Count provides real-time word and character counting with configurable limits for content editors. Perfect for blogs, news sites, and any content management workflow requiring strict content length controls with instant visual feedback.
Features
Basic Functionality:
- Real-time word and character counting displayed below CKEditor 5 text areas
- Configurable word and character limits with visual warning and error states
- Automatic background color changes (yellow warning, red error) when approaching or exceeding limits
- Live count display showing current/limit format (e.g., "Words: 245 / 500")
Unique Features:
- Dual Limit System: Set both word AND character limits independently
- Smart Visual Feedback: Editor background changes color as users approach limits (configurable warning threshold)
- Non-Blocking: Users can exceed limits but receive clear visual warnings
- Immediate Updates: Settings changes take effect without full cache clearing
- Unicode Support: Accurate word counting for international content
Use Cases:
- Blog posts with specific word count requirements
- News articles with character limits for headlines/teasers
- Social media content creation with platform-specific limits
- Academic or professional writing with strict length requirements
- Content templates requiring consistent length across entries
Post-Installation
Initial Setup:
1. Install and enable the module
2. Navigate to Configuration > Content authoring > CKEditor 5 Word Count Settings (`/admin/config/content/ckeditor5-wordcount`)
3. Configure your desired limits:
- Enable word limit and set maximum words (e.g., 500)
- Enable character limit and set maximum characters (e.g., 2000)
- Adjust warning threshold percentage (default: 90%)
Text Format Configuration:
1. Go to Configuration > Text formats and editors (`/admin/config/content/formats`)
2. Edit your CKEditor 5 text format
3. In the toolbar configuration, the word count will automatically appear below editors
4. No additional toolbar buttons needed - the counter displays automatically
How It Works:
- Word/character counts appear below any CKEditor 5 field
- Counts update in real-time as users type
- Visual feedback activates when approaching limits (yellow) or exceeding them (red)
- Settings changes take effect immediately after saving the configuration form
Additional Requirements
Required:
- Drupal 9.4+ or Drupal 10+
- CKEditor 5 (included in Drupal core)
- PHP 8.0+
Development Requirements (for building from source):
- Node.js 16+ and npm
- Webpack 5
- CKEditor 5 development tools
All end-user functionality works immediately after installation - no additional libraries or APIs required.
Unique Advantages:
- Real-time visual feedback during editing (not just display)
- Dual word/character limit system
- Modern CKEditor 5 architecture with proper build tools
- Configurable warning thresholds
- No performance impact on content saving
Want to support the development of this project?
Buy me a coffee ☕️ Buy me a Pizza 🍕
---
Perfect for content teams who need precise control over content length while maintaining a smooth editorial experience. The visual feedback system helps writers stay within limits without interrupting their creative flow.