AI Assistant, Real-Time Collaboration, and More: A Glimpse at CKEditor 5 Premium Features in Drupal

Jul 30 2024

Authored by Nadiia Nykolaichuk.

CKEditor 5 has become a signature innovation in Drupal 10 and a symbol of cutting-edge content editing. As more Drupal websites upgrade, editorial teams can enjoy CKEditor 5’s new and vibrant design, where every detail is crafted for usability and efficiency.

Inspired by the opportunity to help you boost your editorial experiences in Drupal, we have been covering CKEditor 5 extensively. Five can’t-miss articles on CKEditor 5 walk you through many things you might need to know — from the visual comparison of the popular features in CKEditor 4 vs. CKEditor 5 to the upgrade steps. 

Drupal incorporates CKEditor 5’s most standard features which are totally free to use. In addition, CKEditor 5 offers several premium functionalities that have been capturing some interest in Drupal circles such as real-time collaboration, AI Assistant, and more. We think it’s a good idea to give them an overview, especially because there’s a special contributed module to connect them to Drupal — CKEditor 5 Premium Features.

CKEditor 5 in Drupal: a brief overview of the free features

The standard CKEditor 5 feature set in Drupal is available to anyone who has created a new Drupal 10 website or upgraded an older website to Drupal 10. However, in the latter case, it won’t work right out of the box — some steps to upgrade CKEditor will be needed to ensure full compatibility with all of your website’s components. 

The standard CKEditor 5 pack includes just about everything a content editor might need. You can create and format your content using the buttons on the convenient toolbar. This includes (but is not limited to) the following: 

  • Standard bold, italics, underline, heading, bulleted list, numbered list, quote, and all other commonly used formatting buttons.
  • A new dedicated image toolbar with the ability to upload images in bulk from your PC.
  • New balloon panels for adding alt text to images and links to text
  • Ability to create tables in Google Docs by hovering over the desired number of columns and rows, also a special user-friendly toolbar to adjust the table’s formatting.
  • Special characters such as currency icons, the copyright sign, and more to enrich your text
  • A code blocks feature to insert blocks in various programming or markup languages. 

Drupal keeps expanding the choices for out-of-the-box editorial functionalities. For example, in Drupal 10.2, a new “show blocks” feature was added to CKEditor 5 that highlights the blocks in your text using HTML tags (“H” for heading, “P” for paragraph, etc.).

An example of Drupal content in CKEditor 5 with a text, an image, a link, and a table.
An example of Drupal content in CKEditor 5 with a text, an image, a link, and a table.

More than it seems at first glance

Looking at the freshly installed CKEditor 5 toolbar, you might not see all the buttons you need. But more useful buttons are there for you, and you can explore them without even needing to install anything.

Just go to Configuration > Content authoring > Text formats and editors. Select to configure the text format that will be used by you or your editorial team (like “Full HTML”). Check the “Available” section for buttons you’re interested in and drag them to the “Active” section. And vice versa — hide the buttons that you do not intend to use. We showed this in more detail in the CKEditor 5 overview article

Managing the buttons for the CKEditor 5 toolbar in Drupal.
Managing the buttons for the CKEditor 5 toolbar in Drupal.

Getting even more for free with contributed modules

For more savvy editors and specific use cases, there are plenty of community-created modules that add more free functionalities to CKEditor 5. We posted excellent modules to extend CKEditor 5 created by our developers enabling you to insert Google’s Material Icons and SVG icons and create responsive Bootstrap grid layouts. 

Furthermore, there are also modules for all imaginable actions — they help you add text and background color, use the find and replace functionality, easily insert Font Awesome icons, and much more. The choice of modules keeps growing.

There are even entire collections of modules like CKEditor 5 Plugin Pack that provide multiple features in one package. It includes text transformation, to-do lists, word count, block indentation, find and replace, highlight, fonts, template, full-screen mode, and a limited version of the premium WProofreader spell-checking tool.

Of course, when discussing content management experiences, we must mention artificial intelligence. Yes, you can use AI directly in CKEditor with the OpenAI, Augmentor AI, AI Interpolator, and other modules. As recently announced, a unified Drupal AI module is getting ready to hit the stage, which will bring AI to CKEditor 5, too. The AI features can be free or paid depending on the specific AI services and packages you are using. 

CKEditor 5 premium features you can use on your Drupal site

We’ve now reached the part about the features that are marked as premium in CKEditor 5. You will need a premium account to access them. However, there is a 30-day trial period that enables you to give them a test drive. There is a sample environment where you can get the access credentials that you’ll need for your Drupal integration.

CKEditor 5’s sample environment for the premium features free trial.
CKEditor 5’s sample environment for the premium features free trial.

Useful tools always arrive in Drupal, so there is the CKEditor 5 Premium Features module that will help you with every step of integrating those functionalities. It provides user interfaces for managing the access credentials and settings. The detailed workflows are provided in the module’s documentation

The CKEditor 5 Premium Features module’s UIs for credentials and settings.
The CKEditor 5 Premium Features module’s UIs for credentials and settings.

The module consists of submodules for specific features that can be enabled individually based on your needs. 

The submodules included with the CKEditor 5 Premium Features module for Drupal.
The submodules included with the CKEditor 5 Premium Features module for Drupal.

Let’s take a tour of the CKEditor 5 premium features available with the module.

Collaboration

Just like it’s possible to simultaneously work on content in Google Docs or other applications, you can do the same in Drupal’s CKEditor thanks to the Collaboration feature. Here is what is included:

  • Comments. Users can add sidenotes to marked fragments of content in CKEditor 5, reply in discussion threads, and resolve comments once the discussion is over.
Collaboration in CKEditor 5: Comments.
Collaboration in CKEditor 5: Comments.
  • Track Changes. The Track Changes mode highlights the changes made by a user as suggestions that can be accepted or declined.
Collaboration in CKEditor 5: Track Changes.
Collaboration in CKEditor 5: Track Changes.
  • Revision History.  With this feature, you can see all the previous versions of content with the changes highlighted. You can restore any previous version if needed. 
Collaboration in CKEditor 5: Revision History.
Collaboration in CKEditor 5: Revision History.
  • Real-time and non-real-time collaboration

All the three above-described collaboration features are available in two modes — real-time collaboration and asynchronous (non-real-time) collaboration. You can enable only one of the two modes at the same time on your Drupal website.

  • Notifications

A flexible notifications system makes sure you are informed when someone mentions you, replies to your comment, accepts or rejects your suggestion, etc. 

AI Assistant

With the AI Assistant feature, artificial intelligence will be at your fingertips to help you boost your daily content editing. You can generate, rephrase, explain, translate, and summarize content without going anywhere outside your Drupal content editing form.

The tool uses robust models by OpenAI, Azure, and Amazon Bedrock, and allows for the possibility to integrate custom AI models. To use CKEditor’s AI Assistant, you will also need an account with the respective AI service. Currently, the Drupal module supports OpenAI, but more integrations are planned for the near future. 

There are two ways to use AI Assistant:

  • You can use predefined AI commands for common tasks like improving, simplifying, summarizing the text, and more. This is available with the “AI Commands” button. The list of commands is configurable. 
  • You can write your own specific queries to the AI like “Please create a detailed guide to cooking paella.” This is available with the “AI Assistant” button.
Selecting AI commands with AI Assistant in CKEditor 5.
Selecting AI commands with AI Assistant in CKEditor 5.

AI Assistant uses a violet color to distinguish AI tasks from non-AI ones. The color is also customizable. 

Productivity Pack

The Productivity Pack elevates your editorial productivity in multiple different ways, providing a collection of handy features:

  • Case Change. This feature enables you to quickly change the letter case of selected content either via the toolbar or a keyboard shortcut.
  • Format Painter. You can copy the formatting and styles of a specific part of the content and apply it to another part.
  • Paste from Office Enhanced. Grab your MS Word and Excel documents and paste them error-free into CKEditor together with their specific formatting. Not all formatting is supported but most of it is.
  • Templates. Thanks to this feature, you can insert pre-designed content structures into CKEditor content. This could be anything from a formatted table to an entire document template.
  • Slash Commands. You can use the “slash” key to open a list of suggested commands or custom actions. Then you can run a command by typing its name directly in CKEditor.
  • Document Outline. This feature lists all the headings in a sidebar for easy navigation. The list gets auto-updated as changes are made to the content.
  • Table of contents. You get a linked, auto-updatable table of contents based on the headings, enabling you to quickly navigate to specific sections.
Productivity Pack in CKEditor 5: Table of contents.
Productivity Pack in CKEditor 5: Table of contents.

WProofreader Spelling and Grammar Checker

With this feature, your text in CKEditor will be checked by the WebSpellChecker artificial intelligence tool. There is support for 20+ languages. The suggestions are available as you hover over the highlighted text.

Considering the importance of creating accessible content, it’s especially great that the tool warns you about non-inclusive language. It complies with WCAG 2.1 and Section 508 accessibility standards.

Multilingual checks by WProofreader Spelling and Grammar Checker in CKEditor 5.
Multilingual checks by WProofreader Spelling and Grammar Checker in CKEditor 5.

Export to Word

You can easily generate a Microsoft Word file from your CKEditor content item by clicking the “Export to Word” button on the toolbar.

Export to Word in CKEditor 5.
Export to Word in CKEditor 5.

Export to PDF

Just like generating an MS Word file, you can create a PDF document from your CKEditor content by just clicking the “Export to PDF” button.

Export to PDF in CKEditor 5.
Export to PDF in CKEditor 5.

Import from Word

You can import MS Word documents in the .docx or .dotx format into CKEditor at the click of a button on the toolbar. The formatting will be preserved. If rich features such as Comments and Track Changes are enabled, their data will be retained, too.

Import from Word in CKEditor 5.
Import from Word in CKEditor 5.

Multi-level Lists

The hierarchical structuring of complex content often requires numbered lists with counters (1, 1.1, 1.1.1). You can use it in CKEditor 5 thanks to the Multi-level Lists feature. Compatibility with MS Word enables you to just paste the lists into CKEditor from Word with no worries about the formatting.

Multi-level Lists in CKEditor 5.
Multi-level Lists in CKEditor 5.

Mentions

The Drupal module includes the Mentions submodule, while the Mentions feature is currently not marked premium on CKEditor 5’s website. This feature displays a panel with smart autocomplete suggestions as you type a specific marker such as ‘@’ or ‘#’.

Mentions in CKEditor 5.
Mentions in CKEditor 5.

Other CKEditor 5 premium features

CKEditor 5’s website lists a couple of other premium features that are currently not in the scope of the Drupal module. However, we might expect it to change in the future:

  • Pagination. This feature highlights the page break lines in the content that has been exported from PDF or MS Word.
  • CKBox. It’s a comprehensive asset manager that takes care of uploading images and files of various types. Along the way, it can convert images between formats and optimize them. The tool supports responsive design.
  • CKFinder. It is a file management platform enabling you to store files in the cloud or on your server. The tool offers multiple options for image editing and uploading.
  • Math Equations and Chemical Formulas. Thanks to the formula editor, you can enrich your content with math equations or chemical formulas. Both classical and handwriting input modes are available.
Math Equations and Chemical Formulas in CKEditor 5.
Math Equations and Chemical Formulas in CKEditor 5.

Final thoughts

There is an ocean of opportunities to elevate your content editing with both free and premium CKEditor 5 features. What would you like to see in your CKEditor 5? What buttons on the toolbar would make your editorial team happy and bring the utmost efficiency to their workflows?

Pretty much everything is possible to integrate into Drupal thanks to the flexible plugin-based approach in CKEditor 5. We’d be happy to assist you with shaping the CKEditor of your dreams on your Drupal website!

Learn from us
Sign up and receive our monthly insights directly in your inbox!

Subcribe to newsletter (no spam)

Fields