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.

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.

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.

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.

# Setting link attributes (e.g. target, download)

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.

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.

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:

• Research about the beforeinput event.
• Removing an image by pressing Backspace should remove just one image.
• The editor should not crash when deleting a linked mention.

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

• Mentions will now work with languages like Hebrew.
• It will not be possible to copy a part of a mention (it should be copied as plain text instead).
• Mentions will not be lost when typing in front of them.

# Other improvements

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

• Undoing in empty content in the balloon block editor will now be possible on mobile devices. We added the undo and redo buttons to the block toolbar.
• The editor types that cannot be enabled on <textarea> elements will throw clear errors.
• Clicking the media URL should not open it unless the media is already selected.
• Blurry tooltips in Chrome were fixed.
• The widget toolbar API will throw clearer errors when used incorrectly.
• The Vue.js integration should use config.initialData when setting up an editor.
• Plain text pasted into the editor will become more interoperable with existing features.
• Elements representing inline font formatting will be correctly nested.

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

• RTL support. The initial implementation is already available and we are looking for your feedback which will help us prioritize the next steps.
• Image resize handler.
• Improved paste from Google Docs.
• Simple image upload adapter.

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. Read more in the Getting support guide.