CKEditor 5 and Drupal 10: A Powerful Duo for Content Creation
Introduction
CKEditor 5 has been a buzz for content creators and site builders. It is the new avatar of the popular CKEditor, completely built from scratch and with a scalable and extendable architecture. In this article, we will unveil its hidden talent and potential.
Overview of CKEditor
As we all know, CKEditor is a WYSIWYG-rich text editor, developed in JavaScript. Drupal use CKEditor as its default content authoring tool.
CKEditor 5 in Drupal 10
CKEditor 5 is written from scratch; it doesn’t have much to do with its ancestors. Drupal 10 comes with the CKEditor5. This is a major change; even the Drupal 10 release got delayed to make sure that all the features are ready to ensure a smooth transition from CKEditor 4 to CKEditor 5. Let us get more into Drupal 10 and its overall impact.
New and Improved UX
It comes with a new, elegant, modern design and an improved user experience. The below screenshot demonstrates what it looks like on the Drupal 10 interface:
Media Widgets with a dedicated toolbar
Media Widgets in CKEditor 5 have a dedicated balloon toolbar, allowing content creators to play around with the embedded media quickly. Please note that dialogue was replaced by balloon for faster and accessibility for a better editing experience. Below is the screenshot for your reference.
Working with Tables
With the latest version performing operations on tables such as inserting, adjusting, styling and so on is quite convenient and efficient, hence making it a fast-paced editing environment. Below is the screenshot for your reference.
Hyperlink Toolbar
For speed and efficiency, a balloon panel is attached, allowing users to quickly review and manage the hyperlink. Below is the screenshot for your reference.
Additional Modules & Plug-ins
Along with the discussed plug-ins, Drupal 10 offers multiple contributed modules to achieve additional top-up functionality. These contributed modules are as follows:
CKEditor BiDi Buttons
The BiDi Buttons module allows changing the text direction for content elements such as paragraphs, headers, tables, or lists. Useful if you work on multilingual websites, especially those with RTL scripts.
Editor Advanced link
Editor Advanced Link module allows defining additional attributes such as title, class, id, target, and rel, giving the content authors flexibility in using the CSS components defined as part of the Drupal theme.
Editor File upload
The Editor File Upload module adds a button on the editor's active toolbar to upload and link files to the content directly. Though its stable version still supports CKEditor 4, development for CKEditor 5 support is in progress and can be tracked against the issue Drupal 10 & CKEditor 5 readiness.
Font Awesome Icons
The font awesome icons offer a set of web's popular icons and toolkits.
What is more in CKEditor 5?
CKEditor 5 was launched with a set of robust functionality that interests users.
Since Content writing is equivalent to a Team Sport, in many cases several authors are working on a single piece of content simultaneously. Till CKEditor 4, multiple authors couldn't come together and work collectively. Thus, the CKEditor development team came up with supporting Collaborative features. Now reviewing content is much easier as it is possible to add comments, multiple people can edit content in real time and even mention or notify people within the content.
Let us briefly walk through the Premium features (requires Subscription to use).
Track Changes, Comments & Revision History
Track Changes, Comments & Revision History, categorized as Collaboration features, wherein individual users and team members can collaboratively write, review, discuss (Comment) & finalize the content.
It offers a Google Docs-like experience where the content and review process is kept centralized and collaborated in real-time,.
Import from Word
CKEditor Cloud Services offer a robust and scalable service that helps users import the content from Word document to HTML which can be achieved by pushing the Word document directly into the Cloud Services server or by integrating the CKEditor 5 WYSIWYG editor plugin. This functionality allows us to conveniently import Word documents (.docx) or Word template documents (.dotx) into CKEditor 5, without losing the formatting, and track changes such as comments and suggestions.
This feature sends the selected Word file to the CKEditor Cloud Services DOCX to HTML converter service. The service returns an HTML code generated from the uploaded file and then inserts it into the editor content in place of the document selection.
Export to Word and PDF
This feature allows us to export our CKEditor 5 content into PDF format. When enabled, hitting "Export to PDF" triggers the request and sends content along with the styles to CKEditor Cloud's HTML to PDF Converter Service. PDF is being generated by this service, which the user can then download and printed whatever sounds convenient.
Spelling, Grammar and Punctuation Check
This feature is being facilitated by WProofreader SDK, which is an AI-driven multi-lingual text correction tool. It provides the capability of as-you-type-in proofreading in a clean and distraction-free UI. Upon hover, all corrections related to spelling, grammar, and punctuation are suggested in one place, as demonstrated in the below screenshot:
Pagination
This feature allows to figure out the position of page breaks once the CKEditor 5 content gets exported to PDF or Word document. It also considers and respects the page breaks we might have inserted using the page break feature.
In addition to the feature mentioned above, pagination also allows displaying the page number of each page against the total number of pages available in the CKEditor 5 content and/or the document. The dedicated toolbar facilitates easy navigation through the pages (previous, next, specific page number), as demonstrated in the below screenshot:
Math Equations
CKEditor 5 in association with MathType, enables the creation and insertion of math equations of varied complexities. It can be achieved by the "Insert a math equation - MathType" toolbar icon, as demonstrated in the below screenshot:
On top of it, if we wish to edit the equation, double-click on the equation that pops up a new dialogue, enabling us to modify and save the changes. Please find the below screenshot that demonstrates the same:
CKEditor 5 Premium features in Drupal 10
The above-discussed features can be achieved in Drupal 10 by using CKEditor 5 Premium Features module.
please note that, although this module is available in a stable state, Export to PDF & Word features are still in the Experimental stage as far as Drupal 10 is concerned.
A few of the premium features are yet to be added to the CKEditor 5 Premium Features module for Drupal 10. They are as follows:
- Spelling, Grammar and Punctuation Check
- Pagination
- Math Equations
If you wish to play around with the premium features free of any charge, feel free to sign up for CKEditor Premium Features 30-day free trial.
Tips for migrating CKEditor 4 to CKEditor 5
Since there is an immense difference in the architectures of CKEditor 4 & CKEditor 5, upgrading it to the later version becomes tricky. It needs special attention in a couple of key points so as to ensure safe and successful upgrade and content migration. These key points are as follows:
- Check for the plugins you use in CKEditor 4. Many plugins have alternatives to use with CKEditor 5, but some do not support CKEditor 5. If the plugin is not supported, you may invest in converting the plugin or wait for the community to create a new version with CKEditor 5 support.
- Content migration is straightforward. The CKEditor5 working group in Drupal put a great effort into ensuring a smooth migration of content; again, you need to test the content and make any manual or automated adjustments as necessary.
Ensure you review the detailed documentation available on drupal.org on CKEditor migration before the migration.
Future of Drupal 10 with CKEditor 5
The individual strengths of Drupal 10 and CKEditor 5 will support the Communication and Marketing team's use of teams'Drupal in their agile content publishing process. Features include enhanced accessibility, Collaborative features such as Track Changes, Comments, Review History, Real-time Collaboration and so on, and a few of the features contributing to this new revolution.
Conclusion
Citing all the above-enhanced features of Drupal 10 and CKEditor 5, it is evident that the turn-around time for content publishing and corresponding workflow is relatively faster and more efficient than in earlier days. Unlock the true potential of the Drupal website with our expert Drupal Development services. Experience improved productivity and seamless content management today
