« See all

CKEditor 5 v12.3.0 with word count, autocorrect, link attributes and new upload adapter

We are happy to announce the release of CKEditor 5 v12.3.0. This editor version contains some exciting new features that were at the top of the wishlist for our community and customers alike, like word and character count, automatic text transformations, link attributes, text block and list indentation, or the Base64 image upload adapter. Typing on Android got significantly improved and a new watchdog functionality will be helpful in recovering from editor crashes. Read on!

# New rich text editor features

We would like to start off with a “thank you” to our community and customers! Thanks to your invaluable feedback, we are able to prioritize the most-wanted features and shape the editor to be a perfect fit for any environment where a modern WYSIWYG functionality is needed.

If you would like to get more involved or have any feedback, you can check out the planned features for the next release in the “What’s next” section below.

The following new features were included in this release — we hope you will like them, give them a serious test and provide us with even more feedback!

# Automatic text transformation (autocorrect)

The text transformation (or autocorrect) feature replaces predefined text snippets with the target patterns as you type. For example, “(tm)” can be automatically turned into “™” and “---” into “—”. It can also fix quotation marks and turn "foo" into “foo”.

This feature comes pre-configured with a set of popular transformations, but it is also highly configurable, so you can define your own ones. For instance, you can set it to turn “:)” into “🙂” or create a rule that will auto-capitalize sentences.

Automatic text transformations (autocorrect) feature in CKEditor 5 WYSIWYG editor.
Automatic text transformations (autocorrect) feature in CKEditor 5 WYSIWYG editor.

Check out the demos and learn how to configure it in the Automatic text transformation (autocorrect) feature guide.

# Word count and character count

The word and character count feature was one of the most upvoted tickets by the CKEditor 5 community. We are happy to announce that it is now available for you to use.

Word count and character count feature in CKEditor 5 WYSIWYG editor.
Word count and character count feature in CKEditor 5 WYSIWYG editor.

You can play more with the word count functionality and learn how to integrate it in the Word count and character count feature guide.

# Text block indentation

Prior to version 12.3.0, CKEditor 5 only offered list indentation that allowed for creating nested lists. What is more, so far list indentation could only be achieved by using the Tab key. In this release, we introduce text block indentation that allows for indenting elements such as paragraphs or headings along with the indent and outdent toolbar buttons.

Text block and list indentation in CKEditor 5 WYSIWYG editor.
Text block and list indentation in CKEditor 5 WYSIWYG editor.

The improved indentation functionality can be used with both text blocks (paragraphs, headings) and lists, and can be customized. You can learn more about it in the Block indentation feature guide.

The ability to set the links’ target attribute to mark links that should be opened in a new tab was yet another popular request. We are happy to release the “link decoration” feature which not only solves this use case but also opens other possibilities.

Link decorators feature allows to use link attributes in CKEditor 5 WYSIWYG editor.
Link decorators feature allows to use link attributes in CKEditor 5 WYSIWYG editor.

The link decorators feature offers two modes: automatic and manual. In the manual mode, you can define options that the user will see in the link balloon, for example, things such as “Open in a new tab”, “Download” and so on. You can also define which HTML attributes will be assigned to a link when the user selects these options.

The automatic mode, on the other hand, allows you to define rules that will be automatically applied by the editor when outputting a link. For instance, you may want to define that all links which start with http:// (so, external to your site) will be opened in a new tab. This way, you can make the user’s life easier and enforce more consistent content in your database.

Read more on how to configure link decorators in the Link decorators section.

# Watchdog

Despite our best effort and extensive QA, the editor, like every other piece of complex software, may crash from time to time. The same can happen due to third-party plugins and the way how the editor is integrated into your system.

The editor watchdog will automatically restart a crashed editor with the data saved just before that crash. Thanks to this the user will not have to refresh the page and may not even notice that an issue occurred.

The watchdog comes with a handy API and takes care of all the things for you. Read more on how to use it in the Watchdog feature guide.

# Base64 image upload adapter

Inserting images into rich-text content is a key functionality of every WYSIWYG editor. CKEditor 5 is a highly flexible tool that offers a few different image upload options, so you can choose the one that best suits your needs.

The latest addition to the available image uploaders is the Base64 image upload adapter plugin that converts images inserted into the editor into Base64-encoded strings in the editor output. It is an alternative to sending images via the network to your server.

Read more about this feature in the Base64 image upload adapter feature guide.

# Document colors

The document colors section in the font color dropdowns lists the colors already used in the document. The users will thus be able to easily reuse them and preserve stylistic consistency. Now, if the user pastes some content from another website or Microsoft Word, they can easily use the colors which appeared there to style the content that they create.

The document colors feature in CKEditor 5 WYSIWYG editor.
The document colors feature in CKEditor 5 WYSIWYG editor.

Read more about the document colors and check it out in the font feature demo.

# Improvements

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

# Typing on Android

This release fixes a wide range of bugs affecting typing on Android.

Handling input on Android used to be an extremely complicated task due to various software keyboards that can be used and the general lack of reliable events on which the editor could listen. This started to slowly change when the first implementation of the beforeinput event landed in Chrome.

CKEditor 5 project leader, Piotrek Koszuliński, has been an invited expert in the W3C’s Editing Task Force since the beginning and took part in designing the beforeinput event. This allowed us to design CKEditor 5 with this event in mind.

In this iteration we researched whether moving from a mutation-based to beforeinput-based typing handling could improve the overall situation. Our extensive tests showed that using beforeinput, while still tricky, is the right direction as it immediately solved some quirky behaviors and made the rich-text editor functional when the track changes mode is on.

Some of the related tickets:

# Mention feature

Smart autocompletion based on user input turned out to be a popular feature, so we are constantly enhancing our solution. In this iteration, we fixed a few issues in the mention feature:

# Other improvements

Here are some notable enhancements that we introduced in this release:

# CKEditor v12.3.1

Shortly after releasing CKEditor v12.3.0 we found an annoying bug in the text transformation feature. We have decided to release a hotfix as CKEditor 5 v12.3.1. Sorry for any inconvenience caused!

# What’s next?

We will continue working on features and improving the existing ones along the way. The next features on our radar are:

And more! Follow the iteration 26 roadmap for the news and to learn more.

# 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.

CKEditor 5 is a top-quality product with a modern architecture and awesome collaboration features. You can read about the benefits that it brought to some notable projects in the Neos CMS and Spotlight case studies.

If you run a startup and would like to use it, we have prepared a special Startup Program for you!

Share this post

Linkedin Reddit

Discuss on

Hacker News Reddit
CKEditor 5 v12.4.0 with image resizing, to-do lists, RTL language support and more
CKEditor 4.12 with Paste from Word enhancements released