CKEditor 5 empowers creativity: what's new in Drupal 10

CKEditor is a powerful and versatile web-based text editor commonly used in content management systems like Drupal. It empowers content creators and editors with a user-friendly interface for crafting and formatting text, incorporating multimedia elements, and managing a wide range of content types.

CKEditor 5, the latest iteration, introduces a host of major enhancements and new features, from a fresh, modern design to advanced features that streamline content creation and will bring a leap forward in productivity. This new and exciting version of CKEditor comes as part of Drupal 10 out of the box, so provides a great benefit when upgrading your current Drupal site.

In this article, we'll delve into CKEditor 5's impressive capabilities, focusing on its revamped appearance, link management, image handling, table editing, font customisation, HTML embedding, and the exciting premium features it brings to the table. Let's jump in and explore the creative possibilities CKEditor 5 offers for enhancing your digital content.

 

 

Drag and Drop

CKEditor 5's drag-and-drop feature transforms the content editing experience, providing unparalleled convenience for editors. This functionality allows content editors to effortlessly rearrange text, paragraphs, tables, and lists within the editor, enhancing the fluidity of content composition. The ability to move entire blocks or multiple elements with a simple drag-and-drop action offers a significant time-saving advantage, streamlining the editing process. Moreover, content editors can seamlessly import HTML or plain-text content from external sources, simplifying the integration of images into their work. This feature not only improves efficiency but also empowers editors with greater control and flexibility in crafting visually appealing and well-organised content.

Links

One area that's seen noteworthy improvements is link management. Adding links in CKEditor 5 is now more intuitive and user-friendly, as a convenient pop-up box appears within the WYSIWYG window. This makes the process smoother and faster. These link options can be combined with Drupal’s 'Editor Advanced Link' module, which empowers content creators with the ability to fine-tune their links. With this module, editors can define attributes such as title, CSS classes, IDs, link targets, 'rel' attributes, and ARIA labels, which are essential for providing users who use assistive technology like screen readers meaningful information about the purpose or content of the link. 

These enhancements offer a wealth of customisation options for links, whether it's for accessibility, branding, or precise styling. CKEditor 5 and the 'Editor Advanced Link' module together bring a logical link management experience to Drupal, making the process more efficient and versatile.

 

Image Handling

Adding images to your content using CKEditor 5 has been given an upgrade thanks to the new drag-and-drop functionality. Users can simply select an image, whether it's from their device or a webpage, and simply drag and drop it into the WYSIWYG window. Once the image is incorporated, you have the option to designate it as decorative (meaning it doesn't add information to the page and, therefore, does not require alt text) or provide the alt text.

Furthermore, you can fine-tune the image presentation by adjusting its alignment and text wrapping options, all conveniently accessible from the image-dedicated balloon toolbar. If you wish to enrich your image with a link or a caption, you can easily achieve this without leaving the image toolbar.

 

 

When you're ready to adjust the image size, CKEditor 5 simplifies the process by allowing you to resize the image directly within the WYSIWYG window. A straightforward corner selection and drag operation lets you customise the image to your desired dimensions.

Moreover, CKEditor 5 integrates with Drupal media. Once the necessary modules are enabled, you'll discover a new button in the text editor toolbar configuration. Add this button to your active toolbar, specify the media types and view modes you want to make available and save your preferences. You can then conveniently add new media files or select from your media library, following the standard workflow you're accustomed to (you are restricted with resizing the image when using the library). CKEditor 5, along with its compatibility with Drupal media, enhances the image management experience, making it a user-friendly and efficient process.

Table Management

Enhancements to table management in CKEditor 5 bring an improved editor experience. While currently requiring a patch to be added to Composer, the effort is undoubtedly worthwhile for those who frequently utilise tables in their content.

You can specify the number of columns and rows and include an optional title for the table. Once your table is set up, a wide array of editing options becomes available, providing greater flexibility and control over table and cell properties. These edits encompass essential functionalities, such as adding or removing columns and rows, merging and splitting cells, and customising styles for both the entire table and individual cells. You can fine-tune text alignment and even introduce background colours to enhance the visual appeal of your tables.

CKEditor 5 also offers the capability to nest tables within the cells of other tables, providing a versatile tool for crafting intricate charts or layouts based on table structures. This feature allows content creators to format the nested table with the same ease and flexibility as a standalone table, enhancing the possibilities for designing complex and well-organised content layouts.

 

These improvements in CKEditor 5 make working with tables more efficient and user-friendly, empowering content creators to present their data and content in a structured and visually appealing manner.

Font Handling

Modify fonts in your content with CKEditor 5. By installing the 'CKEditor Font Size and Family' module, you can unlock a wide range of font and text editing options right on the WYSIWYG screen. With just a few simple configuration tweaks within the text editor, editors gain the ability to not only adjust font sizes and families but also apply text colours and text background colours, enhancing the text's visual appeal and customisation possibilities.

 

Other Exciting Extensions for CKEditor 5 to Explore

Auto Save

The Autosave feature is a significant enhancement. It automatically saves your data, sending it to the server when necessary, ensuring that your content is safe, even if you forget to hit 'Save.' While it does require installation and some code, the peace of mind it offers is well worth the setup time.

Markdown

With the Markdown plugin, you can switch from the default HTML output to Markdown. This is fantastic for those who prefer a lightweight, developer-friendly formatting syntax. The best part? It's available right out of the box, making content creation more flexible and efficient.

To-Do Lists

CKEditor 5's To-do list feature is a handy addition to your content creation toolkit. It enables you to create interactive checkboxes with labels, supporting all the features of bulleted and numbered lists. You can even nest to-do lists with other list types for a versatile task management experience. While it does require installation, the organisational benefits it brings are worth the minor setup work.

Premium Features

Unleash CKEditor 5's premium features with ease. Install and enable the 'CKEditor 5 Premium Features' module, configure it by adding your licence key, and adjust your text editor's toolbar. Then, you're ready to explore the exceptional features, including track changes, comments, revision history, and real-time collaboration, which enhance collaborative editing, discussions, version control, and harmonious teamwork, streamlining content creation and review for improved efficiency and precision.

Track Changes 

The Track Changes feature brings a dynamic experience to document editing. It automatically marks and suggests changes as you make them. Users can quickly switch to the track changes mode, where all edits generate suggestions that can be reviewed, accepted, discarded, or commented on, enhancing the collaborative editing process.

Revision History

The Revision History feature can be your trusted document versioning companion. It empowers you to manage content development over time with ease. Unlike Drupal's default revision log feature, The preview mode offers a comprehensive view of content changes and the contributors behind them, all within the editor. Users can compare and restore previous document versions.

Comments

With the Comments feature, users can annotate specific sections of content, whether it's text or block elements like images. It facilitates threaded discussions and provides the flexibility to remove comments once discussions are concluded, fostering effective collaboration and feedback.

Real-Time Collaboration

Real-Time Collaboration enables multiple authors to work concurrently on the same rich text document. Additionally, it provides a user presence list, offering a live view of active participants in the document. While other collaboration features can be used asynchronously, real-time collaboration allows for instantaneous teamwork.