What is CKEditor 5?
CKEditor 5 is a brand new version of CKEditor — the rich and versatile WYSIWYG editing tool. WYSIWYG is an abbreviation for What You See Is What You Get and means that the content editor can immediately preview how the content will look on the live website.
The main advantage of such editing tools is that the person who is managing content on the Drupal site does not have to possess HTML coding skills for content formatting. CKEditor does it for you by offering a seamless UI (User Interface) that is capable of text formatting, heading and subheading creation, link inserting, and more.
CKEditor is the default text editor used in Drupal and is available for users out of the box. Its 5th version became integrated with Drupal starting from Drupal 9.5 core.
An Overview of CKEditor 5 in Drupal 10
CKEditor 5 completely differs from its older version, as it was completely rebuilt in terms of architecture. The new CKEditor features include but are not limited to a field for link inserting and editing, bulk image upload, a separate toolbar for media files, and seamless table creation.
Below, Drupfan Drupal specialists take a closer look at some of the CKEditor 5 features.
Bulk image upload
If you need to load numerous images in one post in Drupal, the bulk image upload feature will come in handy. Bulk image upload was not available in CKEditor 4 and users had to upload one image at a time which was time-consuming and frustrating. To add multiple images, just click on the "Insert Image" button and select the desired pictures from your computer.
Adding ALT text to the images
After loading images, you’ll see a notification that the image is missing an ALT text. Adding the ALT attribute is necessary for website accessibility and SEO optimization.
To add ALT text to the image, simply click on this notification. You’ll see a field for entering text alternative. If the image doesn’t require an ALT text, simply choose the ‘Decorative image’ option.
Please note that images uploaded to the Drupal Media Library (those that were added and saved in the system) may already have previously entered ALT text.
Dedicated toolbar for multimedia adjustment
Media files have a dedicated toolbar in CKEditor 5 with a better user experience compared to CKEditor 4. It allows users to adjust multimedia extremely fast through easy-to-use editing buttons.
Inserting links
To link the text in the body copy simply highlight the necessary words and click on the ‘Link’ icon. You’ll now see a ‘Link URL’ panel. Insert the desired link in the ‘Link URL’ field and click on a green checkmark to save the changes. Click on a red cross to cancel this process.
Building tables
Table inserting and styling are easy and fast in CKEditor 5 thanks to the dedicated drop-down toolbar.
If you don’t see the ‘Insert Table’ icon in the editor panel, change the text format to ‘Full HTML’.
Adding Additional Buttons to the CKEditor Panel
The default toolbar offered by CKEditor 5 does not contain all the buttons. To see the full range of buttons offered by CKEditor, go to ‘Configuration → Content authoring → Text formats and editors’ in the admin panel. Here you can see available text formats, as well as create a new one.
Click on the ‘Configure’ button next to the desired text format.
Here you can see a configuration toolbar that shows available and active buttons. You can add or eliminate buttons by dragging them from ‘Available’ to ‘Active’ and vice versa.
Final Thoughts
CKEditor 5 is a powerful tool for content management available in Drupal 10 out of the box that allows you to get more out of your content. If you have any questions regarding the usage or customization of CKEditor on your Drupal website, contact Drupfan web developers today and get a query on your project.
