Report: 2024 State of Collaborative Editing

Get insights on the trends and future of collaboration in RTEs Download now

Read now

CKEditor 5 v12.1.0 with mentions, font color and remove formatting released

CKEditor 5 with mentions and remove formatting features release

We are happy to announce the release of CKEditor 5 v12.1.0.

A month ago, we have seen some really positive feedback regarding the previous release of CKEditor 5 rich-text editor (v12.0.0) in which we introduced such features as inline widgets, distraction-free editor and support for multi-root editors.

This version is no different and it brings four new long-awaited features (mention, font and background color, and remove formatting) as well as many improvements to the editor and our documentation.

New rich text editor features

Thanks to the great amount of feedback that we are receiving from the community and customers, we are able to prioritize the features that you would like to see the most in the upcoming releases. This strategy helps us focus on the “most-wanted” issues and shape the editor so that it would be a perfect fit for any environment where a modern WYSIWYG functionality is needed.

The following new features made it to this release — we hope you will enjoy them, give them a serious test and provide us with even more feedback!

Mention feature (aka autocomplete)

The mention feature provides smart completion functionality for custom text matches based on user input. Every time the user types the pre-configured marker, such as @ or #, they get information about available autocomplete options displayed in a dedicated dropdown. The provided suggestion can be quickly selected and inserted into the content.

Mention feature in CKEditor 5 WYSIWYG editor autocompleting user names and tags.
Mention feature in CKEditor 5 WYSIWYG editor autocompleting user names and tags.

The feature is highly configurable and can support multiple “feeds” (so it can be used to autocomplete, for example, nicknames and hashtags at the same time). A feed can be synchronous or asynchronous which allows for using it with large data sets (for example, external databases).

Refer to the demo and the documentation of the mention feature for more information. You can also check out the more advanced example of the mention feature used in a chat application.

Even though the mention feature has multiple configuration options, it is oriented towards autocompleting tokens such as nicknames or hashtags. Therefore, as the next step we plan to open various utilities needed to implement other autocomplete features so you are able to build your own, even more customized solutions. Some possible use cases for this are autocompleting placeholders or an inline emoji picker.

Font and background color

The highlight feature has been present in CKEditor 5 for over a year. It is our modern, more semantic take on what “text highlighting” is about in many cases. This feature produces clean, semantic output that can represent user intentions, such as “needs review” or “incorrect”.

The font and background color feature introduced in this release is a classic solution that allows the user to choose from many colors. As such, it focuses on the visual aspect rather than on content semantics.

Font and background color feature in CKEditor 5 WYSIWYG editor.
Font and background color feature in CKEditor 5 WYSIWYG editor.

Check out the demo of the font and background color feature.

Remove formatting

CKEditor 5 architecture ensures that only HTML features which are explicitly handled by loaded plugins can be inserted into the editor. For instance, if you enabled only plugins responsible for paragraphs, headings and links, the user will not be able to insert colorful, underlined text, tables, lists, spans or divs of any sort. Therefore, the first step towards keeping the content clean is enabling only the features that you want the user to be able to create or insert in any way.

However, for the times when you need to enable formatting features such as font and background color and, at the same time, you want the user to be able to clean the content from those styles, the remove formatting feature will be your best friend.

Remove formatting feature in CKEditor 5 WYSIWYG editor cleaning up text formatting.
Remove formatting feature in CKEditor 5 WYSIWYG editor cleaning up text formatting.

You can check its demo and how to install it in the Remove formatting feature guide.

Improvements

Besides the new rich-text editor features, we also prepared many improvements. Let’s walk through the most important ones.

React integration bug fixes

We are happy to see a great adoption of our rich-text editor integrations for React, Angular and Vue.js.

In this iteration, the CKEditor 5 WYSIWYG component for React got a few releases that fixed the following issues reported to us by the community:

  • The changes sent by the React component will not be handled until the editor announces it is ready (#83).
  • An issue with the onChange event (#75).
  • The editor will no longer freeze when [data] is a string (#78).

Better error reporting for duplicated modules

One of the most common issues when integrating CKEditor 5 is code duplication which leads to unclear runtime errors. This kind of issues can be caused by multiple factors, such as trying to add plugins to an existing build, conflicting versions of dependencies (leading to npm or yarn installing two or more versions of one package) and so on.

In this iteration, we implemented a solution which should warn developers in a clearer way that some modules were duplicated. This will help developers resolve these issues much quicker.

Additionally, we also plan to extend our webpack plugin which will allow us to cover more scenarios.

Other improvements

Documentation

One of our ongoing initiatives is to review the existing documentation and cover the missing parts, especially those that we are frequently asked about. Due to the size of the project, this work will continue for several months. Here is what we covered in this iteration:

What’s next?

No surprise here — we will continue working on features and improving the existing ones along the way. The next features on our radar are:

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 general issues in the main 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.

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Input email to subscribe to newsletter

HiddenGatedContent.

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

Form content fields

Form submit

HiddenGatedContent.
Hidden unused field.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });