CKEditor 5 v26.0.0 with extensible builds, inline widget styling and annotations guides

Building your own custom CKEditor 5 experience is now easier than ever before. An improved online builder is one thing, but with the introduction of DLL builds it is now possible to create a custom editor build and later expand it with desired features without the need to recompile everything. This release also brings improvements to handling keystrokes on Mac, styling inline widgets, editor placeholder and a pack of new guides about using collaboration features’ annotations. Read on for more details!

# New rich text editor features

New features have been added to the latest release of the CKEditor 5 WYSIWYG editor. These include the ability to add plugins to an existing editor build without recompiling, support for the legacy <font> tag and inline widget styling. There were also several other changes, including improvements to the online builder and the editor placeholder. Keystroke management has also been amended on macOS.

Last but not least, we have a bunch of guides about using and customizing collaboration features’ annotations that will allow you to make full use of the recently rewritten annotations API.

As always, we are looking forward to your feedback on these changes. Any comments, recommendations, and bug reports that you submit allow us to choose the proper direction for future development and tend better to our users’ needs.

Find out more about the new rich text editor features and make sure to check out the demos and documentation that accompany them.

# Adding plugins to a build easier with DLL builds

Have you ever wanted to add a feature or a plugin to your CKEditor 5 build? Have you been discouraged by the need to recompile it or to use online builder all over again? After several months of work, in this release we introduce compatibility with webpack’s DllPlugin to resolve exactly this issue.

Now you can prepare a single build and add a feature to it without the hassle of recompiling everything. It is easy and fast. Refer to the DLL builds guide to find out how to employ this new feature and make your CKEditor 5 WYSIWYG editor integration more flexible.

While allowing to extend builds with additional plugins without rebuilding the bundle, certain sets of plugins had to be decoupled. This led to the introduction of “soft requirements” and may require adjusting your current editor setup. Read the migration to 26.0.0 guide to ensure a seamless transition.

Note that currently, CKEditor 5 does not come with a ready-to-use DLL build. Using this integration method requires creating it on your own, based on the tools available in the CKEditor 5 development environment.

Follow the Ship CKEditor 5 DLLs issue on GitHub for updates (and add 👍 if you are interested in this functionality).

# Introducing inline widget styling

Inline widgets are a popular solution for implementing custom elements such as placeholders. Before, when applying styles to the content, inline widgets were left unstyled. Addressing the needs of CKEditor 5 users, the functionality was rewritten to include inline widgets into all text operations on content. Now whatever sits in a widget, gets the same treatment as a regular text - it will be bolded, italicized or colored all the same.

# Expanded collaboration features documentation

In the previous release, we have introduced the redesigned annotations API. Annotations — comments and suggestions — are what powers the UI of collaboration features. They are really flexible and customizable, as besides the display mode you choose (inline, narrow sidebar, wide sidebar or combined sidebar + inline), you can also customize them a lot, modifying the theme and adding your own templates or views with your custom UI elements and functionality.

Did you know that your collaboration features integration can display track changes suggestions inline, while keeping the comments in the sidebar, as seen below?

To make the adoption of the expanded annotations API easier, we have created an entire Annotations section in the collaboration features documentation. Head there to learn more about the provided display modes as well as such customization options as:

• Theme customization.
• Configuration, including comment input field configuration.
• Providing a custom template for the default views.
• Providing your own custom view for annotations.

In addition to this, we have just added a new guide that will explain how to integrate your custom features with track changes. This is a must read for anyone who would like to learn how to support content insertions and deletions as well as formatting changes in CKEditor 5’s suggestion mode.

Last but not least, the API of all collaboration features was just made available in a form of public API documentation integrated with the CKEditor 5 API docs. Check it out if you would like to learn more about the API of features such as comments, track changes or real-time collaboration.

# Other improvements

Besides new features, we have also worked on some important improvements. These include — but are not limited to:

# Editor placeholder behavior improved

The default behavior of the editor placeholder changed. Before, it would disappear as soon as the user focused the editing area (e.g. by simply clicking on it). It was remodelled to more closely resemble the native behavior and now the placeholder will only disappear once there is some actual content typed or pasted into the editor.

It disappears only after content is typed in.">

You can check out the enhanced placeholder in the Editor placeholder feature guide.

# Support for legacy <font> tag

The font feature in CKEditor 5 brings support for setting the font family, size or color for your text. All these are controlled by applying inline <span> elements with appropriate style attributes. To support these features in some pre-existing content, we have just introduced support for the legacy <font> element.

Starting from this release, text formatted with the <font> tag will be accepted by the font feature, although the editor will always transform the markup to the modern format with <span> elements.

Note that while <font color> will be supported out-of-the-box, for <font size> and <font face> you will need to enable the config.fontSize.supportAllValues and config.fontFamily.supportAllValues options, respectively.

You can read more about the font feature as well as its various configuration possibilities in the Font feature guide.

# Improvements in the online builder

Several changes were introduced in CKEditor 5 online builder. First of all, all packages have been updated to their newest versions to ensure proper build output with the v26.0.0 release. Feature descriptions will also now have links to CKEditor 5 documentation, for easy reference and more in-depth information on the functions available. In addition to this, any premium plugins will be clearly marked in the plugin choice step. Last but not least, we have introduced the possibility to add WProofreader (the spell and grammar checking plugin) via the online builder and adjusted some plugin descriptions. We hope all these improvements will make building your custom editor even simpler than before!

# Improved keystrokes on Mac

Prior to this release, the Ctrl and Cmd modifiers were used interchangeably on Mac. You could have used Ctrl+B or Cmd+B to apply bold on macOS despite the keystroke being defined as 'Ctrl+B' in the code. A side effect of this was that CKEditor 5 keyboard shortcuts could conflict with some other macOS keystrokes.

Starting from this release, a keystroke defined as 'Ctrl+B' in the code will only be triggered by Cmd+B on macOS and Ctrl+B on PC. If you wish to define a keystroke using Ctrl on macOS, use the “forced modifier” notation: 'Ctrl!+B'.

# Bug fixes

As usual, we fixed quite a few bugs in an effort to make the user experience even better than before:

• Autoformat will no longer create a code block when typing in bulleted or numbered lists.
• Indent buttons order was reversed in all default build configurations as the previous one was unintuitive.
• Copying a nested table pasted into the editor no longer crashes it.
• A period now sticks to the preceding word during word wrap.
• Pasting formatted single-line text over a widget will no longer split it into multiple paragraphs.
• IP addresses will now be converted into links while typing by the autolink feature.

Please refer to the changelog for more new features, improvements and bug fixes.

# Breaking changes

This release introduces some major breaking changes. Make sure you check the changelog for more details.

Most of the breaking changes were caused by the introduction of the DLL builds and are related to the changed plugin dependencies. In addition to that, in this release we have unified the button and command naming conventions which resulted in some name changes.

Due to the nature of these changes, please refer to the extensive migration to v26.0.0 guide for details before upgrading your editor installation.

# What’s next?

We keep on constantly improving and adding new features to our software. Here is what is currently on the table:

• Inline images — this new approach to handling them in the editor will allow for having multiple images in a single content block. Our focus is on making the user experience when working with all types of images consistent and intuitive, so this feature will likely take us 2 more iterations to polish.
• Drag and drop mechanism for both widgets and textual content — a killer feature that both the customers and the community have been waiting for very impatiently.
• New language of parts plugin that will allow to set the language of text fragments to improve content accessibility.
• Table captions.

Some bug fixes and improvements are on the line, too, so follow the iteration 41 roadmap for more news and features we have already started working on.

# Download

CKEditor 5 builds can be downloaded from the CDN, npm or as zip packages. Read more in the Installation guide.

# License

CKEditor 5 is available under Open Source and Commercial licenses. Full details can be found on our license page.

# Reporting issues and contributing

You can report all issues for any of the CKEditor 5 packages in the CKEditor 5 repository. Read more in the Reporting issues guide.

# Support

The CKEditor 5 documentation is growing and always up to date. Community support is available through Stack Overflow. Read more in the Getting support guide.