Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (2023)

One of the most talked about features of Drupal 10 is the revamped text editor. CKEditor 5 offers a modern, light, and fresh user interface with improved icons, colors, and toolbar mechanics, making editorial experiences in Drupal more efficient and enjoyable for the user.

New balloon panels speed up link management and ALT text creation. Embedded media now has a dedicated panel for faster formatting. In addition, there is a toolbar to create tables on the fly, a reworked collection of special characters, an option to add images in bulk, and more.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (1)

In this post, we walk you through using a couple of useful contributed modules, created by the ImageX team, that build on the out-of-the-box capabilities and extend CKEditor 5’s potential in Drupal 10. The information about these modules is also useful if your website is based on Drupal 8 or Drupal 9.

A glimpse at shaping your CKEditor 5 toolbar in Drupal

To begin, it's worth mentioning that CKEditor 5 in Drupal 10 hides more options in its settings than you see on the toolbar by default. You can activate additional buttons with no need to download anything. The CKEditor toolbar is designed for ultimate flexibility, allowing you to tailor it to include only the buttons you need. Furthermore, different text formats can have their toolbars customized for user roles with higher or lower permission levels.

To configure the CKEditor 5 toolbar in Drupal 10, go to Configuration > Content authoring > Text formats and editors, click “Configure” next to the format you want to change (Full HTML, Restricted HTML, or Basic HTML), and drag the needed buttons from the “Available buttons” to the “Active toolbar.” On the contrary, you can disable the unnecessary buttons by dragging them in the opposite direction. When you are done, scroll down the page to click “Save configuration.”

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (2)

Extending Drupal 10’s CKEditor 5 with contributed modules

While the CKEditor 5 functionality in the Drupal 10 core is impressive, the tool is capable of much more. CKEditor 5 has a wide range of features, both free and premium, that are not part of the Drupal 10 core — at least, for today. Some interesting feature examples include autoformatting, word count, export to PDF and Word, spelling and grammar check, mentions, comments, tracking changes, revision history, and more.

There is always a way to connect a CKEditor 5 plugin to a Drupal 10 website for integrating a specific feature. Smooth integration can be provided by a Drupal module that registers a CKEditor plugin. Both custom and contributed Drupal modules are eligible for this job.

With the thriving Drupal community, chances are high that a contributed module for anything you might need already exists, so no wonder there is a great ecosystem of Drupal modules to extend CKEditor. However, we need some time until all contributed modules become fully ready for the 5th version of CKEditor, considering its brand new architecture.

(Video) CKEditor 5 in Drupal 10: What is there to be excited about? DrupalCon Portland 2022

Let’s see how to extend CKEditor 5 with the help of the following modules contributed by Bryan Sharpe and Aaron Christian of ImageX. These modules are in different stages of readiness for CKEditor 5 in Drupal 10 — from full support to being in active development.

The Material Icons contributed module

Icons can do a great job at drawing your audience’s attention to content, highlighting some important aspects, and helping users process the information. Material Icons by Google are described as simple, modern, and friendly. They are designed with readability and clarity in mind and optimized for great display across all platforms or device resolutions.

The huge collection includes around 1500 icons grouped into categories such as Action, Alert, Audio & Video, Communication, Social, and so on. There are icons for every concept you may need to depict on your content pages.

And the entire collection is at your fingertips for easy use in Drupal 10’s CKEditor 5 thanks to the Material Icons module. This contributed module fully supports CKEditor 5 starting with the 2.0.1 release.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (3)

1. Configuring the available icon styles

Google’s collection is represented in 5 styles — Baseline, Outlined, Two-Tone, Round, and Sharp, and the Drupal module fully supports this feature. So, with the Material Icons module installed and enabled on your Drupal website, you can proceed with configuring the icon styles by going to Configuration > Content Authoring > Material Icons.

The Baseline style family is the only one enabled out of the box. You can enable other styles by selecting their checkboxes. The selected packs will be added as libraries, so whenever you want to add an icon via your Drupal 10 website’s CKEditor 5 interface, you will be able to choose among those style packs.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (4)

2. Adding the Material Icons button to the CKEditor 5 toolbar

To use Materials Icons, you will also need to make the new button available on the CKEditor 5 toolbar:

  1. go to the “Text formats and editors” page
  2. click “Configure” next to the format you want to edit (Full HTML, Restricted HTML, or Basic HTML)
  3. drag the Material Icons button from the “Available buttons” to the “Active toolbar”
  4. click “Save configuration” at the bottom of the page
Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (5)

3. Adding icons to content in CKEditor 5

To use Material Icons in content, you can click the respective button in your Drupal 10 website’s CKEditor 5 toolbar and see a dialog box that enables you to:

(Video) USERS & EDITORS - CKEditor 5 in Drupal 10: what is there to be excited about?

  • select the style family in the “Icon Type” dropdown
  • optionally, add some CSS classes
  • find icons via a search bar
  • or follow the link to check out their entire list
Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (6)

To find an icon, start typing its name or the name of the concept you want to depict. The relevant options will show up thanks to the autocomplete feature. Click on the icon you want to add and finalize the process with the “Insert icon” button. Done!

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (7)

4. Beyond the inline use: a custom field type with a widget

The Material Icons contributed module is not limited by the inline use with CKEditor. The module also provides a custom field type, which can be added to the content structure. There is a field widget, which enables you to allow or disable style selection, select the default style, and allow or disable additional classes.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (8)

The CKEditor Bootstrap Grid contributed module

Next up is the Drupal module which enables you to create rows and columns in CKEditor based on the Bootstrap syntax. The Bootstrap framework is known for its great capabilities in building responsive, mobile-first pages. So the rows and columns that you build with the CKEditor Bootstrap Grid module by Bryan are meant to look perfect across all devices.

Version 2 of this contributed module has been a significant rewrite which made it more user-friendly and flexible. For the moment, the module needs this patch to fully support CKEditor 5 in Drupal 10. Technically, the patch already makes the module work with the latest CKEditor version, it’s just not “stable” yet. Feel free to get involved and contribute if you'd like to help speed up the CKEditor 5 readiness for this module.

1. Adding the CKEditor Bootstrap Grid button to the toolbar

When the module has been installed and enabled on your Drupal website, you need to add the Bootstrap Grid button to CKEditor’s active toolbar. The steps for adding a button are the same as the ones we have described earlier in this article — it’s all about drag-and-dropping it to the “Active toolbar” on the specific text format’s configuration page.

2. Adjusting the Bootstrap Grid settings per text format (optional)

As you scroll down the text format configuration page after adding the button to the CKEditor toolbar, you will also see the CKEditor plugin settings for Bootstrap Grid. Here is where you can enable or disable the use of a Bootstrap CDN, and enable or disable the layouts with a specific number of columns, as well as specific breakpoints. By default, all the options are enabled here, and the CDN link is included, so you may not have to change anything.

These settings will apply specifically to the text format you are currently configuring. Be sure to click “Save configuration” at the bottom of the page once you have made your changes.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (9)

3. Detailed settings for Bootstrap Grid layouts (optional)

By going to Configuration > Content authoring > CKEditor Bootstrap Grid, you will be able to configure every detail of the grid layouts for all breakpoints. The default settings are very sensible, so there may be no need to adjust anything.

(Video) Everything You Wanted to Know about CKEditor 5 and Drupal, But Were Afraid to Ask

The breakpoints define at which width the grids should change their layouts to provide optimal viewing experiences based on the devices they are viewed from. It is essential to mention that the media queries, in this case, do not relate to the screen size but to the size of CKEditor, which is an iFrame inside a window.

There are six breakpoints available out of the box — Extra Small (xs), Small (sm), Medium (md), Large (lg), Extra large (xs), and Extra extra large (xxl).

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (10)

You can expand each breakpoint, edit its label, and adjust the layouts for each number of columns. This includes the equal width, the auto, and the full-width modes, as well as specific proportions between the columns.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (11)

4. Creating a Bootstrap grid in CKEditor

When in CKEditor, click the “Insert Bootstrap Grid” button on its toolbar. The dialog box will invite you to select the number of columns.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (12)

As you click “Next,” you will see the dialog box for choosing a layout. Optionally, you can click to add a container (default, fluid, or wrapper).

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (13)

The advanced settings enable you to optionally add classes to the grid.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (14)

The CKEditor SVG Icon module

The next tool that we’d like to feature in this post is the CKEditor SVG Icon module by Aaron. It’s a brand new Drupal module — fresh out of the development oven, created in early 2023 specifically for CKEditor 5 in Drupal 10. The alpha version of the module is currently being actively developed, so we are anticipating new features and improvements in the near future.

The CKEditor SVG Icon module provides the functionality for inserting inline SVG icons via the CKEditor 5’s interface once you’ve added a collection of icons as a single sprite. The SVG (Scalable Vector Graphics) format is great for icons because:

(Video) Lessons learned from helping port the top contrib projects to Drupal 10

  • they can be scaled up or down without losing any quality, which makes them convenient for displaying at different sizes on different devices
  • front-end developers can style SVG icons or add advanced effects to them using CSS or JavaScript
  • SVG icons are also small in file size
  • they are accessible to screen readers and other assistive technologies

With the CKEditor SVG Icon module installed and enabled on your website, you will need to make its button available on CKEditor 5’s active toolbar. Just like with the previous modules we’ve described in the article, this can be done on the “Text formats and editors” page for a particular text format.

Next, you’ll need to add a collection of SVG icons to your Drupal website that is going to be used in CKEditor 5. Currently, in the module’s 1.0.0-alpha1 version, this can be done by adding an SVG sprite (such as this one) to the website’s theme folder. However, the module’s creator is actively working on the option to add icon collections as a simple link via the Drupal admin dashboard. This option will soon be available in CKEditor 5 plugin settings, just below the toolbar configuration. By opening the “SVG Icon” plugin tab, you’ll find the SVG sprite path field for inserting the link.

With the button added to CKEditor 5’s active toolbar and a sprite of icons added to your Drupal website, you’ll be able to insert SVG icons via CKEditor 5’s UI. Just click the SVG button and put in the icon name/ID and size — Extra Small (xs), Small (sm), Medium (md), Large (lg), Extra large (xs), and Extra extra large (xxl).

It needs to be noted that the module does not support icon previews out of the box in CKEditor 5 — at least, for today. To have previews, you’d need to implement a hook, which can be found on the module’s drupal.org page.

Extending CKEditor 5 in Drupal 10: a Couple of Great Contributed Modules (15)

Final thoughts

Extending CKEditor 5 in Drupal 10 with a wide array of features can greatly empower your editorial teams. It’s great to know the Drupal community creates useful contributed modules to extend CKEditor 5, and we at ImageX are happy to be involved.

Any use cases that are not covered by existing contributed Drupal modules can always be resolved through custom coding. Don’t hesitate to contact our Drupal development team whenever you need to set up some extra functionalities to CKEditor on your Drupal website.


Where do we upload contributed modules in Drupal? ›

The process of uploading modules in Drupal is done using the: sites/all/modules/contributed . Upload the files to the Drupal installation's preferred modules folder using SFTP (file transfer protocol) or Git (version control).

What is Drupal module? ›

A module is code that extends Drupal's by altering existing functionality or adding new features. You can use modules contributed by others or create your own. Learn more about creating and using Drupal modules.

How do I add a contributed module in Drupal? ›

Using the Drupal User Interface (easy):
  1. Navigate to the Extend page (admin/modules) via the Manage administrative menu.
  2. Locate the module(s) you wish to enable and check the box next to each one.
  3. Click Install to enable (turn on) the new module(s)
Dec 31, 2022

How do I link to an uploaded file in Drupal? ›

Inline Link to File

If you have already uploaded the file to Drupal, click Link to Content, then search for the file's name, select the file and click Insert Link. If you have not yet uploaded the file to Drupal, click Link > Browse Server > Upload > Choose file. Then select and upload the file from your computer.

What are the three types of Drupal modules? ›

1.2. Concept: Modules
  • Managing user accounts (the core User module)
  • Managing basic content (the core Node module) and fields (the core Field and Field UI modules; there are also core modules providing field types)
  • Managing navigation menus (the core Menu UI module)
Feb 20, 2023

What is the difference between a module and a plugin in Drupal? ›

The Drupal plugin system allows a particular module or subsystem to provide functionality in an extensible, object-oriented way. The controlling module defines the basic framework (interface) for the functionality, and other modules can create plugins (implementing the interface) with particular behaviors.

Is Drupal being discontinued? ›

Yes, Drupal 10 is coming closer, while Drupal 8 hits its end of life on November 2, 2021. Drupal 7 “retires” a year later, in November of 2022.

How do I add an extra module? ›

Click File > New > New Module.
In the Configure your new module form, enter the following details:
  1. Application Name: This name is used as the title of your app launcher icon for the new module.
  2. Module Name: This text is used as the name of the folder where your source code and resources files are visible.

How many Drupal contributors are there? ›

How is the Drupal community doing?
Metric2019 - 20202020 - 2021
Number of individual contributors8,3037,420
Number of organizational contributors1,2161,186
Number of issues "fixed" or "closed"31,15323,882
Number of projects worked on4,1953,779
Oct 25, 2021

What are the contributed modules used in Drupal? ›

And right after that, we'll talk about how to pick your Drupal modules.
  • Admin Toolbar Module. The Drupal Admin Toolbar module is extremely useful for site admin and site builder navigation. ...
  • Paragraphs Module. ...
  • Webform Module. ...
  • Layout Builder. ...
  • Devel Module. ...
  • Twig Tweak Module. ...
  • Drupal GraphQL Module. ...
  • Redirect and Pathauto Module.
Feb 1, 2022

How do I upload files to Drupal module? ›

To upload a file to your website, click the Web tab, choose the file that you want to upload, and then click Upload. Your Drupal Commons website uses the default file settings to determine the size and type of file that you can upload. To change these settings, go to Menu > Configuration > File settings.

How do I upload a file to a module? ›

Click a course card to access that course.
  1. Click Modules in the Course Navigation Menu.
  2. Click the Add Item icon for the module that you would like to add a file to.
  3. A pop-up will appear. Click the Add drop-down menu.
  4. Select File.
  5. The added file will appear at the bottom of the list of items in the module.
Dec 10, 2022

How do I create a link to upload a file in box? ›

How do I insert a Box upload link?
  1. Create a new folder in Box. You can name it anything you'd like. ...
  2. In the 'More Options' menu, select 'File Request'. The default settings should work for our uses.
  3. Click the 'Copy' button to copy the link. ...
  4. Paste the link into a block on your site.

What are the five types of module? ›

The modules can belong to certain objects (such as forms), or they can exist independently (belong to a configuration as a whole).
Module types
  • Managed application module. ...
  • Common modules. ...
  • Object modules. ...
  • Form modules. ...
  • Session module. ...
  • External connection module. ...
  • Manager modules. ...
  • Command modules.

How can we extend or add features to a Drupal website? ›

Extending Drupal
  1. Overview. ...
  2. Themes. ...
  3. Contributed modules. ...
  4. Installing Modules. ...
  5. Installing modules' Composer dependencies. ...
  6. Installing Modules from the Command Line. ...
  7. Updating Modules. ...
  8. Module Configuration.

What is the difference between themes and modules in Drupal? ›

Fortunately such a distinction is pretty easy: While both are a form of "add-on" or "plug-in" to the Drupal system, Themes are about layout and Modules are about content.

What plugin type most commonly used for extensions are in Drupal? ›

The three "main" plugin types, most commonly used for extensions, are backends, datasources and processors. While configuration forms are supported for backends, datasources, processors and trackers, any of these plugins don't have a configuration form attached by default.

What is module vs plugin vs extension? ›

Extension could mean functionality added to an already existing module or plugin. The module or plugin already works, but there is something extra you want it to do, a behavior you want to change or add to it. So since it is very related to an existing module, you just add it to the existing.

What is the difference between extension and modules? ›

The main difference is that you can realize the main functional with an extension or a component. And with a module you realize an additional functional. Extensions include modules, or modules extend components.

What is the disadvantage of Drupal? ›

It can be challenging to use and is not as user-friendly as other open-source platforms like WordPress or Joomla. Plus, there's the issue of security… or lack thereof. Choosing the suitable CMS for you is a decision that can't be taken lightly, and an open-source platform like Drupal CMS has its own pros and cons.

Does NASA use Drupal? ›

Drupal powers all the content that you find on the main NASA website. It is how NASA reaches out to you and others to help you learn more about your favourite planets, space, upcoming projects, and every other related news and research.

Why is Drupal so hard? ›

The flexibility of Drupal is what makes it one of the best CMSs available, but flexibility adds complexity, and this complexity is what can make it so challenging to learn.

How do I update a contributed module in Drupal 8? ›

Using the administrative interface
  1. Put your site in maintenance mode. ...
  2. In the Manage administrative menu, navigate to Reports > Available updates > Update (admin/reports/updates/update).
  3. Find and check the module in the list. ...
  4. Click Continue.
  5. Click Run database updates. ...
  6. Click Continue and apply all updates.
Feb 20, 2023

Where are Drupal modules stored? ›

All core modules and libraries files are now located in the /core directory. In Drupal 8, you can still use the Drupal 7/6 best practice of putting your custom and Drupal.org contributed (downloaded) modules into /sites/all/modules but you can also just put them into the /modules directory, which has the same effect.

In which folder do I save custom modules in Drupal? ›

Create a folder and a module file

In Drupal 6. x and 7. x, sites/all/modules (or sites/all/modules/contrib and sites/all/modules/custom) is the preferred place for non-core modules with sites/all/themes (or sites/all/themes/contrib and sites/all/themes/custom ) for non-core themes.

How can you update your Drupal module in a specific version? ›

Updating Drupal's minor version requires the following steps:
  1. Make a backup of your existing database.
  2. Update all Drupal core code to the latest version.
  3. Perform any additional steps noted in the release notes.
  4. Execute any require database updates via update. php.
Jan 18, 2023

How to update a Drupal module using Composer? ›

Update the production environment (when applicable)
  1. Push the changed composer. json and composer. lock files to production.
  2. run composer install --no-dev on production, rather than composer update.
  3. run drush updatedb or update. php.
Mar 31, 2023

How to improve performance in Drupal? ›

Ways to Increase Your Drupal Website Performance
  1. Keep it simple. ...
  2. Cache your pages. ...
  3. Optimize your website to work with different devices and browsers. ...
  4. Compress your images, CSS and Javascript files. ...
  5. Use a Content Distribution Network (CDN) with Drupal. ...
  6. Choose a host that can offer greater speed.
Oct 5, 2021

How many Drupal modules are there? ›

Installing and running Drupal is completely free. This includes the 40,000+ modules available to extend site functionality and the 2500+ themes used for modifying the site appearance.

What folder do I save custom modules? ›

~/CMSModules/<module code name> – you can use this folder to store store custom web forms, user controls or other files used by the module.

How do I enable Drupal modules? ›

Enabling a module using the Drupal user interface
  1. Sign in to your website as an administrator.
  2. In the module list, find the module you want to enable, and then select its checkbox.
  3. Scroll to the bottom of the webpage, and then click Install.

What is the difference between Drupal plugins and modules? ›

The Drupal plugin system allows a particular module or subsystem to provide functionality in an extensible, object-oriented way. The controlling module defines the basic framework (interface) for the functionality, and other modules can create plugins (implementing the interface) with particular behaviors.

Which is a way to organize your content in Drupal? ›

Taxonomy, a powerful core module, allows you to connect, relate and classify your website's content. In Drupal, these terms are gathered within "vocabularies". The Taxonomy module allows you to create, manage and apply those vocabularies.

How do I backup and migrate a Drupal module? ›

Go to Administration > Configuration > Development > Backup and Migrate -> Settings. Create a Settings Profile with the configurations you want. In quick backup page (Administration > Configuration > Development > Backup and Migrate) you can see the option Settings Profile defined.

How do I Export all content in Drupal? ›

In order to export content in bulk, select the desired content nodes you wish to export in the content overview. You can then select the "Export content" action from the bulk actions dropdown menu and click on the "Apply to selected items" button.


1. CKEditor 5 for Drupal Developers - lauriii
(Drupalcamp - Drupal User Group Belgium)
2. Reimagining the WYSIWYG CKEditor 5 in Drupal Core / DrupalCon North America 2021
(Drupal Association)
3. "CKEditor 5" by Vladimir Roudakov [Drupal Brisbane Meetup, 2021-04-13]
(TES Development)
4. MAKERS & BUILDERS - Reimagining text editing in Drupal Core: CKEditor 5
(Drupal Association)
5. 5 Must Have Modules for Every Drupal Website
6. Talking Drupal #385 - Off The Cuff: Drupal 10, Skills Rot, and Contrib
(Talking Drupal)


Top Articles
Latest Posts
Article information

Author: Maia Crooks Jr

Last Updated: 10/16/2023

Views: 5982

Rating: 4.2 / 5 (63 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Maia Crooks Jr

Birthday: 1997-09-21

Address: 93119 Joseph Street, Peggyfurt, NC 11582

Phone: +2983088926881

Job: Principal Design Liaison

Hobby: Web surfing, Skiing, role-playing games, Sketching, Polo, Sewing, Genealogy

Introduction: My name is Maia Crooks Jr, I am a homely, joyous, shiny, successful, hilarious, thoughtful, joyous person who loves writing and wants to share my knowledge and understanding with you.