Content creation is no longer the domain of just developers or IT specialists. Modern businesses, nonprofits, and organizations rely on streamlined content management systems (CMS) that empower all users (regardless of technical expertise) to easily create, edit, and manage digital content. Over the years, CMS tools have evolved to meet the growing demand for simplicity and efficiency, providing intuitive interfaces and powerful features that reduce the technical barriers traditionally associated with content management.
As businesses strive for faster, more dynamic publishing, CKEditor 5 in Drupal 10 and 11 offers an enhanced toolset designed to simplify even the most complex content editing tasks. With features that improve media management and enhance collaboration capabilities, CKEditor 5 is revolutionizing how content is created and maintained inside Drupal.
Let’s dig into the new features that set CKEditor 5 apart from its predecessor, CKEditor 4, and how you can best utilize this solution no matter if you’re a seasoned developer or a content editor.
The Previous CKEditor 4
For years, Drupal has relied on CKEditor as its go-to rich text editor, with CKEditor 4 serving as the default in Drupal 8 and Drupal 9. CKEditor 4 allowed content editors to manage text formatting, add images, and embed media within a familiar, Microsoft Word-like interface. This integration significantly improved Drupal’s content editing experience compared to earlier versions, making it easier for non-technical users to handle basic content updates without needing HTML knowledge.
Now, CKEditor 5 is available for Drupal 9.5 versions and up. CKEditor 5 has replaced CKEditor 4 as the default text editor, with lots of useful, innovative features that help with the content creation and editing processes.
Key Features of CKEditor 5 in Drupal 10 and 11
Let’s cover some key features with this latest version and what you can expect. If you’re looking for a more detailed overview of these features, check out the CKEditor page which gives some more granularity for each of these features.
Revamped User Interface (UI)
One of the standout improvements in CKEditor 5 is its revamped user interface, designed to be cleaner, more intuitive, and highly customizable. The new interface places the most frequently used tools and formatting options front and center, reducing clutter and making the editing process much simpler for users of all skill levels.
Cleaner Toolbar Layout: The toolbar has been streamlined to present only the most necessary tools by default, reducing visual noise and helping editors focus on their content. Advanced formatting and customization options are still available but are tucked away in expandable menus, helping users not get overwhelmed with too many options right away.
Customizable Toolbar: Developers or administrators can customize the toolbar to better suit their team’s needs. For instance, they can add or remove buttons to match the specific content types or workflows of the organization. This means users see only the tools they need, further simplifying the experience.
Non-Technical User Adaptation: The revamped UI caters specifically to non-technical users. Whether they’re adding text, images, or media, the intuitive design helps users with minimal technical knowledge easily adapt to CKEditor 5. This dramatically lowers the learning curve and encourages broader participation in content creation within organizations.
Improved Content Formatting
Content editors often need to format their content in precise and visually engaging ways, and CKEditor 5 offers several advanced formatting controls that make this easier than ever. This includes:
Real-Time Text Alignment and Rich Text Support: Editors can now make real-time adjustments to the alignment of text (left, center, right, justify) without leaving the editing environment. In addition to standard formatting like bold, italic, and underline, CKEditor 5 supports a broader range of text styling options, such as custom fonts, font sizes, and colors, allowing for more creative control over how content looks.
Simplified Multimedia Embedding: One of the most time-consuming tasks in content creation is embedding and managing media, but CKEditor 5 makes this process seamless with drag-and-drop functionality. Editors can easily insert images, videos, or other media by simply dragging files into the editor window. This not only reduces the number of steps required but also provides a more fluid and intuitive experience.
Easier Styling: CKEditor 5 includes an updated, simplified interface for applying styles to content blocks, allowing users to create custom layouts with consistent formatting. Predefined styles (e.g., headings, pull quotes, and callouts) are more accessible and can be applied in just a couple of clicks, giving the content a polished, professional look without needing HTML or CSS knowledge.
Better Collaboration Tools
Collaboration is increasingly important in content creation, especially as teams grow larger and more distributed. CKEditor 5 introduces real-time collaboration features, bringing a major productivity boost to content workflows.
Collaborative Editing: Multiple users can now work on the same piece of content simultaneously. This feature allows team members to see each other’s edits in real-time, promoting faster and more dynamic content creation. Gone are the days of emailing documents back and forth or dealing with version control issues — everyone can work together in one centralized location.
Real-Time Comments and Suggestions: Collaboration goes beyond just editing. CKEditor 5 offers a comments feature that allows users to leave feedback directly on the content. Editors, designers, and stakeholders can suggest changes, raise questions, or offer feedback without disrupting the workflow. Suggestions can be accepted or rejected in real-time, creating a streamlined review process.
Content Locking and Tracking: CKEditor 5 also provides tools to track changes and prevent content from being overwritten. The restricted editing mode allows you to give more or less permission to certain users to be able to edit certain parts of the content. This is especially useful for large teams working on the same site and not everyone needs to have full access to the entire piece of content.
Enhanced Accessibility
Making sure that all users can access and engage with content your content is key, especially as web accessibility standards continue to evolve. Accessibility is becoming increasingly important, and you need to adjust your site to comply with these standards. CKEditor 5 has taken significant steps to enhance its accessibility, making sure that content meets modern compliance standards and is usable by people with disabilities.
WCAG 2.1 Compliance: CKEditor 5 is fully compliant with the Web Content Accessibility Guidelines (WCAG) 2.1, making it easier for your web pages to meet legal and ethical accessibility requirements. Editors can add accessible media elements, alt text for images, and correctly structured headings, boosting the accessibility of your content for screen readers and other assistive technologies.
Keyboard Navigation: CKEditor 5 is designed with keyboard users in mind. Editors can navigate through the interface and make changes to content entirely via keyboard, making the editor fully operable without a mouse. This improves usability for individuals with motor impairments and makes it easier for all users to work more efficiently.
Screen Reader Support: CKEditor 5 integrates seamlessly with popular screen readers so that visually impaired users can effectively engage with content. This support extends to both content creation (so creators can interact with the editor) and content consumption (so end users can access and understand the published content).
Accessibility Checker Plugin: For teams that prioritize accessibility, CKEditor 5 offers an Accessibility Checker plugin, which scans content in real-time to identify any potential accessibility issues. This proactive approach allows editors to fix problems before the content goes live, successfully creating an inclusive experience for all users.
Migrating from CKEditor 4 to CKEditor 5
With any migration, it’s important to conduct careful planning to have a smooth transition from the old editor to the new one. Especially if you’ve already made the switch from an old Drupal version to Drupal 10 or 11, it will be beneficial in the long run to update the CKEditor as well since version 4 has reached its end of life. The CKEditor website provides a detailed migration guide you can refer to during this process as well.
Step 1: Backup your Site and Content
This isn’t anything new, but make sure you back up your website. You’ll also want to review your current contrib modules to check if they’re compatible with CKEditor 5. You can use the CKEditor Plugin Report to help with this:
For custom modules, you want to make sure you update them to be compatible with CKEditor 5. Drupal provides some tips on how to do this as well.
Step 2: Enable CKEditor 5 in Drupal 10 or 11
Once you're ready to upgrade, the next step is to enable the CKEditor 5 module in your Drupal 10 or 11 instance. Drupal 10 and 11 comes with CKEditor 5 as the default editor, but if you are upgrading from a previous version of Drupal, CKEditor 4 might still be active. You will need to enable CKEditor 5 and assign it as the default editor for your content types.
Step 3: Update Text Formats
Each of your text formats will require individual updating. Luckily, this is pretty straightforward as you just change the value of the text editor to CKEditor 5. This dropdown will be located under each text format within the “text formats and editors” Admin page. Again, Drupal provides a more in-depth walkthrough as to how you successfully make this change to all your text formats.
Step 4: Test
Of course, with any new update, test to make sure everything is working correctly, and then you can uninstall the old editor once you know that the CKEditor 5 runs properly in your environment.
Key Takeaways on The Drupal CKEditor 5
The latest CKEditor for Drupal 10 and 11 brings a suite of features that simplify and elevate the editing experience for users of all technical backgrounds. By incorporating a more intuitive user interface, enhanced multimedia support, and collaborative tools, CKEditor 5 empowers content creators and site administrators to produce and manage content with greater ease, flexibility, and efficiency.
If you’re currently using an older version of Drupal, now is the ideal time to consider upgrading. Not only will you gain access to CKEditor 5’s useful features, but you’ll also benefit from Drupal’s latest version that’s packed with many other enhancements that secure your website, keep it up-to-date, and support your evolving content needs.
