Contribute to this guideReport an issue

guideEmoji

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

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.

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.

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

# Roadmap

The first implementation of emoji support was introduced in CKEditor 4.10, and the following features are planned to be added soon:

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