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.
Import Word/Export Word and PDF
Import word/Export word/& PDF: When installed, the module allows for the easy importing and exporting of the above formats. While the export functionality is fully stable in CKeditor, the converters are considered experimental for Drupal at this time. The import of .docx & .dotx files will retain the formatting, comments and even track changes.
Notification System
Alongside these collaboration features, CKEditor will be introducing a new notification system to keep editors and writers well-informed about the content's status. Stay up-to-date with real-time notifications, ensuring a smoother editorial workflow.
Productivity Pack
The Productivity Pack is a bundle of Premium features which make document editing faster, easier, and more efficient.
The Productivity Pack features include:
- Templates allow you to create and insert predefined content structures into the editor, saving time and ensuring consistency in the content display.
- Slash Commands lets you execute actions using the / key as well as create your own custom actions. This can help to streamline content creation, reducing navigation through the editor options and saving time.
- Document Outline adds an automatic outline of the document headings in a sidebar to help navigate the document.
- Table of contents inserts a linked table of contents into the document, which automatically updates as headings are added and will be retained in the editor output data.
- Format Painter copies text formatting and styles and applies it to a different part of the content. This helps to ensure consistent formatting across the content, saves editor time and contributes to a more professional appearance.
- Paste from Office Enhanced provides error-free copy-pasting from MS Word and Excel. Formatted text, complex tables, media, and layouts are retained – turning MS Office content into clean HTML.
The module also provides a Full-screen plugin that maximises the editing area which is very useful when using the premium features such as comments and Document outline as they take up extra space around the editor.
Demos of these CKEditor 5 features are available from links within the module project page. There are many other non-premium and premium features that can be installed outside of the Drupal module with some developer involvement, which can be found here.
Conclusion
In this article, we've explored CKEditor 5's significant enhancements for content creators and editors in Drupal 10. CKEditor 5 offers improved link management, effortless image handling, streamlined table editing, versatile font customisation, and simplified HTML embedding. We've also touched on exciting extensions that enhance your content creation process.
Furthermore, CKEditor 5's premium features, like Track Changes, Revision History, Comments, Real-Time Collaboration, Import/Export for Word and PDF, Notification System, and the Productivity Pack, bring advanced capabilities for collaborative editing and efficient content creation.
As you dive into CKEditor 5's features, we encourage you to explore further and experience the benefits firsthand. It's a game-changer for content editing and collaboration in Drupal 10. Unleash your creativity and discover a more efficient and professional content editing experience with CKEditor 5.
