« See all

CKEditor 5 v12.2.0 with mobile-friendly comments mode

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. Visit the Gitter channel if you have some quick questions. Read more in the Getting support guide.

Share this post

Linkedin Reddit
CKEditor 4 - Integrate WYSIWYG editor with Angular