Israel Saramento 31 Aug, 2023
Drupal 10 and CKEditor 5

Drupal 10 is already available and it offers a lot of improvements and QOL features. For example, it provides a better frontend and backend appearance with the Olivero and Claro themes, respectively. Views can now support a responsive grid display format, and there's even a starter kit theme generation tool through a command line that generates a standalone theme from a compatible base theme. However, the highlight of this new Drupal version is the new content editor: CKEditor 5.

CKEditor

Version 4 of CKEditor is a well-known, versatile, and rich WYSIWYG editor. The new version improves and adds features to make this editor even better than before.

1 - At first glance, we can see a better UI design that enhances UI/UX.

CKEditor interface


2 - The Styles dropdown has been revamped, providing an easier understanding of how the styles will look.

The Styles dropdown has been revamped, giving an easier understanding of how the styles will look like.


3 - Numbered lists have a couple of new options for adjustment.

Numbered list with a couple new options to adjust.


4 - Links now have a balloon toolbar attached to them, making it faster and easier to see and edit the link.

Links now have this balloon toolbar attached to it that makes it faster and easier to see and edit the link.


5 - The image widget now has a dedicated toolbar attached to it, making it easier and faster to adjust the embedded image.

Image widget now has a dedicated toolbar attached to it, making it easier and faster to adjust the embed image.


6 - The revamped table feature delivers a very fast and practical way of creating tables, using only the balloon toolbar.

The revamped table feature manages to deliver a very fast and practical way of creating tables, only using the balloon toolbar.


All of that and more will be available in upcoming features. Additionally, there is a new premium concept of CKEditor that adds another set of improved features:

Track Changes,   
Revision History,   
Comments,   
Real-time Collaboration,   
Export to PDF,   
and Export to Word.

You can see a demonstration of these features in this video: CKEditor Premium Features Module for Drupal


How to use CKEditor 5 on Drupal

If you are creating a project using Drupal 9.5+, the CKEditor 5 is already added to the core, so its out-of-the-box to use. However, if you are upgrading your Drupal version and still using CKEditor 4, it will not be upgraded automatically. Therefore, there are some steps to be aware of: 

1 - Find a module that provides CKEditor 4 plugins
2 - Verify if the contributed modules are ready for CKEditor 5. Drupal.org has a list of modules with CKEditor 4 plugins and their compatibility with version 5.
3 - Upgrade custom modules that provide plugins for CKEditor 4.
4 - Upgrade the text formats to use the new version of the editor:

Upgrade the text formats to use the new version of the editor


5 - Test, test and test.
6 - If everything works as expected CKEditor 4 module can be uninstalled.

CKEditor is a great and indispensable tool for a content editor's daily work, and with each improvement and upgrade it becomes faster, easier and more reliable to use. If you have a Drupal project that needs an upgrade to CKEditor 5 or to a newer Drupal version, let us know how we can help you.


References: 
- https://www.drupal.org/blog/drupal-10-0-0
- https://ckeditor.com/blog/drupal-10-launched-taking-content-editing-to-the-next-level-with-ckeditor-5/
- https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckeditor-5-module/testing-the-ckeditor-4-to-5-upgrade-path
- https://mglaman.dev/blog/upgrading-my-site-ckeditor-4-ckeditor-5
- https://dev.acquia.com/tutorial/upgrading-ckeditor-5
- https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckeditor-5-module/upgrading-modules-extending-ckeditor-4-to-support-ckeditor-5
- https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckeditor-5-module/upgrade-coordination-for-modules-providing-ckeditor-4-plugins
- https://github.com/ckeditor/ckeditor5#editing-and-collaboration-features
- https://ckeditor.com/docs/ckeditor5/latest/updating/index.html
- https://ckeditor.com/docs/ckeditor5/latest/updating/ckeditor4/migration-from-ckeditor-4.html
- https://ckeditor.com/docs/ckeditor5/latest/features/index.html