Content Editing Experiences with CKEditor 5 in Drupal

CKEditor definitely deserves to be ranked MVP to everyone who creates or edits content on a Drupal website. It is a rich and versatile text editing tool built on the WYSIWYG ("What You See Is What You Get") principle, which means you can immediately see how the content you are creating will look to your readers. Non-technical users don't have to learn HTML tags to format the content. Instead, CKEditor provides an intuitively understandable user interface that enables them to easily change fonts, add images, insert links, create subheadings, and so on.

Being the default text editor in Drupal, CKEditor is available to all Drupal users out of the box. It is a third-party open-source tool that was integrated with the Drupal core in Drupal 8.0.

Today, Drupal ships with CKEditor 5 - a new, totally revamped version of the software. CKEditor 5 became the default text editor in Drupal 9.5 core and the only text editor in the newly released Drupal 10 core. Let's take a closer look at editing experiences with CKEditor 5 on Drupal 9.5 and Drupal 10 websites.

Using CKEditor 5

Rewritten from the ground up, CKEditor 5 uses a different architecture and different APIs. But what content editors directly interact with is a new and modern UI, which enables them to create great content faster. Its new goodies include a dedicated toolbar for multimedia, an attached panel for links, bulk uploading images, easy creation of tables, revamped special characters, and much more. 

Adding ALT text for images

Providing a text alternative (ALT attribute) that describes an image is vital for web accessibility, and CKEditor knows that. If you are adding an image that has been previously saved in the Media Library, it may already have a text alternative. However, if you are adding an image from your computer, the first thing CKEditor 5 will ask you for is to provide the ALT text in a simple balloon panel. 

The green checkmark is meant for adding the text you have pasted into the field, and the red cross mark is meant for canceling the process. If you cancel, you will keep seeing an "Add missing alternative text" reminder. However, if you toggle the "Decorative image" option on, it's ok to leave the ALT text out.

Every time you click on the added image in CKEditor 5, a dedicated balloon toolbar will open, which is designed for editing and formatting the embedded multimedia. You can use it to change the ALT text, align the image left, right, or center, wrap text or break text with the image, position the image inline, add a caption, resize the image, and add a link to it.

Adding images in bulk

Content creators will appreciate the exciting new feature of bulk image upload from the PC. This functionality was not available in CKEditor 4 - the only option was to upload one image at a time without installing and configuring several other modules.

Adding links

Once you click the "link" button on the toolbar, you will see a balloon panel for inserting links, which is very similar to that for adding alternative text. The panel has a simple and modern look, with a green checkmark for adding the link you have pasted into the "Link URL" field and a red cross mark for canceling the process.

Creating tables

Finally, content creators can create and edit tables as easily as they can in Google Docs. The "table" button on the CKEditor 5 toolbar enables you to quickly hover over the required number of rows and columns, then make one click and the table is ready. 

Plenty of formatting options are available on the dedicated toolbar for tables. They include inserting columns or rows, deleting columns or rows, specifying a header column or row, merging cells, adding a caption, and more.

Adding special characters

The revamped dropdown with special characters enables content editors to insert special letters, math symbols, the signs of various currencies, the copyright sign, the trademark sign, and so on.

Adding buttons to the toolbar

Not all the buttons you may need are included in the default set of buttons on the CKEditor 5 toolbar. Among the popular buttons that are not active by default are Text Alignment, Indent, Undo, and Underline, as well as the above-described Special Characters.

You can add these and other buttons to the toolbar by going to Configuration > Content authoring > Text formats and editors, selecting the input format you would like to configure (e.g. "Full HTML"), and dragging the buttons from "Available" to "Active."

Hopefully, more content creators and website administrators will soon have a chance to enjoy working with the revamped user interface of CKEditor 5 as more websites get upgraded to Drupal 9.5 or Drupal 10. With CKeditor 5, a new chapter in Drupal content editing experiences has officially been started!

This article is adapted from A Glimpse at Content Editing Experiences with CKEditor 5 in Drupal and is republished with the author's permission.