CKEditor 4.10 with autocomplete, emoji and mentions

We are happy to share that CKEditor 4.10 has just been released! This major release brings Mentions, Emoji and Autocomplete plugins to CKEditor 4, along with a few other useful enhancements and bug fixes. Read on!

# Mentions

The new Mentions plugin provides you with smart completion feature that can be used to quickly insert user names and tags into your content.

This will result in a fewer number of typos and quicker content creation, especially in applications built around collaboration.

Give it a try on the Mentions, Tags and Emoji sample, and if you would like to get more technical information check the Mentions plugin documentation.

# Emoji

The Emoji plugin allows for easy inserting of Unicode emoji characters in a unified, platform-independent way. Emojis are inserted by typing identifiers based on Unicode Short Names wrapped with colon characters (:) in the editor and selecting the suggestion from the provided dropdown.

Check out the Mentions, Tags and Emoji sample and read more in the Emoji plugin documentation!

We plan to further improve the Emoji plugin experience in the future, for instance:

• Adding a toolbar button that allows to list, search and filter through the entire emoji list.
• Improving emoji matching with support for keywords.

Feel invited to join the discussion and share your feedback!

# Autocomplete

The Autocomplete plugin provides a set of APIs to create a complex, context-aware content insertion feature based on user input.

It is used as a base for both Mentions and Emoji plugins. It exposes an extensible API that can be used in various use cases, providing smart templates and references to all sorts of items, from user names through bug tracker issues to automated messages.

You can check an example implementation with placeholders for customer care service email response in the Autocomplete sample.

For a full technical overview head to the Autocomplete plugin documentation. This article also includes a tutorial for building a custom autocomplete implementation of the Autotag plugin step-by-step, with a working sample and downloadable source code available.

The autocomplete feature is complemented by two new helper plugins:

• Text Watcher – Checks whether an editor’s text change matches the chosen criteria.
• Text Match – Allows to search CKEDITOR.dom.range for matching text.

# More new features and updates

This release also includes some smaller improvements, such as:

• New versions of Spell Check As You Type (SCAYT) and WebSpellChecker plugins.
• Autolink now also supports email addresses.
• Albanian, Arabic, Australian English, Brazilian Portuguese, Bulgarian, Canadian French, Chinese, Czech, Estonian, French, Galician, German, Hungarian, Kurdish, Norwegian, Persian, Polish, Romanian, Russian, Slovak, Swedish, Turkish, Uighur localizations were updated — Many thanks to our contributors at Transifex!

# API changes

We hope the developers will be happy with some API additions we made:

• The new CKEDITOR.dom.range.getClientRects() method returns rectangles occupied by a given range. It comes in handy if you want to place some GUI next to the selected fragment. A fallback for browsers that do not provide this API natively is also provided.
• The new CKEDITOR.tools.throttle function can be used to optimize the performance.
• The new isAbsolute parameter of CKEDITOR.dom.element.getClientRect() allows for returning an absolute position, which is relative to the containing block, rather than to the edge of the viewport.
• The config.plugins, config.extraPlugins and config.removePlugins options can now also be provided as an array of strings.

# Bug fixes

Other than that, a handful of bug fixes were also included in this release, like for example:

• Fixed a case where the Clipboard plugin would paste formatted text despite config.forcePasteAsPlainText set to true.
• Easy Image caption is no longer hidden after pasting.
• Full-width spaces are no longer removed when pasted in non-WebKit browsers.
• Fixed a bug where it took two clicks to focus a widget in Microsoft Edge.
• Improved accessibility so that screen readers no longer leave the forms mode.

# Release notes

Check out the release notes for the full list of changes.

# Download

Download CKEditor now and upgrade your installation or use your favorite package manager to install it!

# License

CKEditor is available under Open Source and Commercial licenses. Full details can be found on our license page.

# Reporting issues and contributing

Please report any new issues in the CKEditor 4 development repository and follow the instructions in the issue template. You can also contribute code and provide editor patches through pull requests.

# Support

Community support is available through Stack Overflow. Visit the resources page for additional options.

# Feedback needed!

We are really enthusiastic about this new, major CKEditor version and its numerous new features. We will be happy to hear from you and thankful for any suggestions that will help us improve these features and tailor them to your expectations.