Make Your Drupal 9 CKEditor Pop – 4 Useful Modules You Didn’t Know Existed

The most important CMS feature is actually the content editor. Additionally, Drupal has significantly improved its content management capabilities with various new features for Drupal 8/9, including the CKEditor widget system and the Advanced Content Filter (ACF), thanks to the powerhouse that is CKEditor as its default rich text editing tool. So, yes, even with the default features, it’s quite powerful. But some contributed modules and plug-ins can help you truly step up your CKEditor game. Learn more about the top and most intriguing add-ons for CKEditor in the following paragraphs.

The Drupal 9 CKEditor

First, for those who are unfamiliar with Drupal, the WYSIWYG (What you see is what you get) default rich editor in Drupal 8 and 9 is CKEditor 4.5. It’s a text editor that aids website administrators in adding and editing content to web pages. Similar to Drupal, CKEditor is an open source project that has recently received an update with a number of powerful new features that will be further developed. Contributors to Drupal aim to integrate the newest and most up-to-date version, CKEditor 5, into Drupal 10, as part of the Drupal 10 readiness campaign.

Now that we have the basics out of the way, let’s get into the upgrades!

Extending CKEditor with these fantastic Drupal 9 modules

1. CKEditor Read More 

You know those occasions when you want to offer the reader the option to read the remaining material in a lengthy passage? Use the CKEditor Read More option at that point to encourage your users to “read on” while maintaining a condensed style for your website. Once you install the contributor module, Drupal 9 offers a quick and easy way to enable the Read More / Show Less capability.

Implementing the module:

Once you install this module, you will need to configure a few settings:

1. Edit preferred Text format and enable “Limit allowed HTML tags”.
2. Add <div data-readmore-less-text data-readmore-more-text data-readmore-type class=” ckeditor-readmore”> in “Allowed HTML tags”. Disable the “Limit allowed HTML tags” and hit save.
3. Now drag and drop the “Read more” icon from available buttons to active toolbar (as shown in the image above) and hit save.
4. After clearing the cache you will find the “Read More” icon in the text editor when you choose the “Preferred Text format”.

2. CKEditor Color Button

By default, CKEditor does not provide you the option to alter the colour of the text inside the editor. However, the Drupal 9 CKEditor Colour Button module needs to be on your list if you want to alter the colour of a particular text or even highlight the text with various colours. Keep taking mind that installing this module also necessitates installing the Panel button module, and installing both of these modules necessitates installing the Colour Button Library and the Panel Button Library. The colours button can be moved from the available buttons to the active toolbar in the appropriate text format after installing the modules and adding libraries to the theme’s libraries folder. 

3. CKEditor Youtube 

The Drupal 9 CKEditor Youtube module helps you add Youtube videos into your content without a long embed code. After installing and moving the Youtube icon form from Available buttons to Active toolbar, you can find Youtube icons in the text editor in preferred text format. This module depends on the library.

4. CKEditor CodeSnippet

You can insert “code content”—which is code that is highlighted and properly formatted—within the content using the CKEditor CodeSnippet module. This module makes use of the highlight-js package and all of its supported styles. The composer will automatically install the library when this module is installed. After installing this module, you can switch the “code snippet” icon from the Available button to the Active toolbar. 

The text format settings for the CKEditor plugin now have a Code Snippet tab. You can select or deselect the supported programming languages here. 

Conclusion:

Even without all of these fantastic add-ons, CKEditor is among the most user-friendly and effective WYSIWYG editors available. Some numerous additional plugins and modules can help you expand and further customize your editor. It provides a scalable and efficient way to use CK Editor. 

Let us know in case of any queries, please feel free to reach out via comments.