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.
It includes an autocomplete component that will list available emojis. Each identifier should be wrapped in colon (
:) characters, like
When you press the Enter or Tab key, the suggested value will be inserted into the editor.
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.
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
:woman_health_worker: with the
doctor keyword, then typing
doctor will also include these two results.
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
# 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.
# Related Features
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.