When the editing tools are intuitive, content creators can channel their energy into what truly counts-producing great content. User-friendly content management systems help them save time, reduce frustration, and streamline their editing process.
Drupal strives to enhance user experience for both technical and non-technical users with every new update. With the latest version, Drupal 10, content authors can now focus on enhancing their productivity and creating better content for their audience. A standout feature in this release is CKEditor 5, now integrated into the core. This means it's available right out of the box!
In this blog, we're diving into the content editing powers of CKEditor 5 in Drupal 10. So buckle up, because we're about to take your content creation game to the next level.
Redefining Content Editing Experience with Drupal 10’s CKEditor 5
CKEditor 5 has brought in many new additional features and abilities compared to CKEditor 4 which not only offers a streamlined content editing process but also gives you the power to make your content more engaging and appealing. Adding links, media, creating tables, etc. is now quicker and easier with CKEditor 5 in Drupal 10.
Here's an overview of what the upgraded CKEditor module brings to the table:
Revamped WYSIWYG Editor - A contemporary and user-centric interface, Drupal 10’s latest WYSIWYG editor prioritizes intuitiveness, featuring enhanced toolbar options, a more adaptable layout, and a streamlined interface.
Streamlined Inline Editing - Edit content directly from the front end of your website without having to navigate to the back end.
Collaborative Work Features (Premium Feature) - You can collaborate among multiple users on the same content now. With the collaboration features, you can track changes, comment on the content, check content revision history, and more!
Now, let’s understand what are the content editing benefits of the additional features in CKEditor 5 in detail.
Modern User Interface
Compared to the somewhat outdated interface of Drupal 7, Drupal 10 offers a sleek and intuitive user interface where you can streamline content editing workflows. While new users may find using Drupal 7 overwhelming, Drupal 10 offers a more user-friendly UI, making content creation and editing more accessible and efficient.
You now get a refined user experience with simplified improvements to interface colors, icons, toolbar items mechanics, and the theme. You can select among three UI options:
Classic - It allows you to edit with a fixed toolbar without any interference in content editing.
Balloon - This option offers a floating toolbar to allow you to edit content in any location.
Inline - The inline display option displays the toolbar when you focus the editor.
Media Widgets and Dedicated Toolbar
With CKEditor 5 in Drupal 10, you get to experience enhanced media management with new media widgets and a dedicated toolbar. These tools provide a streamlined interface for adding and managing media content, making it easier to embed images, videos, and other media directly within content.
New Styles Dropdown
The new styles dropdown feature in CKEditor 5 allows content editors to apply predefined styles to text and elements seamlessly. This dropdown is integrated into the text editor toolbar, offering a user-friendly way to ensure consistent styling across content without requiring HTML or CSS knowledge.
Easy Tables with Quick Dropdown
CKeditor 5 in D10 simplifies table creation and management with an easy tables feature. This includes a quick dropdown menu within the text editor, enabling users to insert, customize, and format tables efficiently. This enhancement helps you maintain data organization and presentation quality.
Balloon Panels
Balloon panels are a new addition that provides contextual tooltips and editing options directly within the text editor. These panels appear as floating, interactive elements, making it easier to access relevant tools and information without navigating away from the content. Plus, it’s much more intuitive and mobile-friendly.
Insert Links and Special Characters
When you select the “link” button on the toolbar, a balloon panel for inserting links will appear, resembling the one used for adding alternative text. This panel features a clean and contemporary design, with a green checkmark to confirm the link entered in the “Link URL” field and a red cross to cancel the action.
The updated special characters dropdown allows content editors to insert various symbols, including special letters, mathematical symbols, currency signs, copyright symbols, trademark symbols, and more.
The Material Icons Module
Google's Material Icons collection offers a range of simple, contemporary icons. The Material Icons module allows you to choose from style families like Baseline, Outlined, Two-Tone, Round, and Sharp. Baseline style is activated by default, but you can enable other styles in the module settings at Configuration > Content Authoring > Material Icons.
To include the Material Icons button in the CKEditor 5 toolbar, navigate to Configuration > Content authoring > Text formats and editors, select your preferred format, and drag the Material Icons button from “Available” to “Active.”
Once added to the toolbar, you can search for icons by name, choose the style family from the dropdown, and apply optional classes. The autocomplete feature and a link to the full icon list simplify the process of finding the desired icons.
The Editor Advanced Link Module
The Enhanced Link Editor module enriches the CKEditor 5 link dialog box with additional options for incorporating link attributes. Version 2.1.1 is compatible with CKEditor 5. Following installation, navigate to Configuration > Content authoring > Text formats and editors. Choose the input format and locate the CKEditor 5 plugins list. Activate the "Enhanced links" plugin and designate attributes such as:
ARIA label
Title
CSS classes
ID
Open in a new window (target attribute)
Link relationship
Activate these attributes by ticking the boxes and then, save the configuration. Subsequently, these attributes become accessible during the creation or modification of links within the content editor.
Better Lists Feature
The lists feature improves the creation and management of ordered and unordered lists. Enhanced list formatting options allow for more control over list appearance, making it easier to create structured and visually appealing content.
Autoformatting & Transformations
Autoformatting allows content editing without needing to use toolbar buttons. You can swiftly create lists or format text by using simple typing shortcuts.
Transformations enable the automatic creation of symbols using shortcut text, like generating a copyright symbol by typing (C). You can also set up auto-correct rules using this feature.
TypeScript
The new CKEditor will soon support official TypeScript for its entire API. This setup will offer content admins several benefits, such as producing clean, high-quality, maintainable code and providing code autocompletion and type suggestions for CKEditor APIs.
Final Thoughts
Drupal 10 introduced a range of improvements, like an upgraded content editing experience with CKEditor 5, a more modular architecture, better performance, and scalability. For content creators, Drupal 10’s CKEditor 5 is a game-changer. You can whip up killer user experiences quicker and slicker than ever before.
Thinking about migrating to Drupal 10? That's not just a good idea-it's a strategic move! Your audience will thank you for it with faster load times, smoother navigation, and a website packed with more features than a Texas barbecue. Did you know we’re Certified Drupal Migration Partners? Reach out to us today to find out how we can help you.
PubDate