Emoji

This feature was introduced in CKEditor 4.10. It is provided through optional plugins that are not included in the CKEditor 4 presets available from the Download site and need to be added to your custom build with online builder.

Please note that the emoji feature uses system fonts to render emojis. CKEditor 4 does not provide them on its own which means emojis availability depends on your operating system.

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

The emoji can also be selected manually from the dedicated dropdown that opens when you select the Emoji List button from the toolbar.

Emoji plugin showing two emoji suggestions.

The Emoji plugin that provides this functionality is an implementation of the Autocomplete feature.

It includes an autocomplete component that will list available emojis. Each identifier should be wrapped in colon (:) characters, like :slightly_smiling_face:, :cat_face: or :winking_face:.

When you press the Enter or Tab key, the suggested value will be inserted into the editor.

The editor content with emoji inserted.

Starting with CKEditor 4.11 the Emoji plugin also features a toolbar button that opens a dropdown where you can browse all the available emojis.

Emoji dropdown with search input focused.

Clicking any icon in the categories section will scroll the dropdown to the given category.

You can also use the text filter input (the search bar) to type and narrow down the results. This filter also matches keywords, so if the database contains emoji like :man_health_worker: and :woman_health_worker: with the doctor keyword, then typing doctor will also include these two results.

# Configuration

The emoji feature is ready-to-use out of the box, but you can customize it by modifying the default emoji list or changing the number of characters that trigger the autocompletion mechanism.

# Custom Emoji List

By default CKEditor 4 comes with a list of around 1500 emojis, which is just a subset of the entire Unicode Standard. You are free to reduce or increase the number of loaded emojis using the config.emoji_emojiListUrl setting.

# Characters Needed for Autocompletion

You can adjust the number of characters needed to show the emoji list when typing. Reducing this number will improve the performance. Refer to the config.emoji_minChars option for more details.

# Emoji Demo

See the “Mentions, Tags and Emoji” sample that shows an example of emoji used together with the mentions feature.

Refer to the following resources for more information about autocomplete features:

The Autocomplete article explains how to implement smart completion for custom text matches based on user input.
The Mentions and Tags article explains how to implement smart completion for user input based on a chosen marker character.