Example of Insert Emoticons in React Rich Text Editor Component


This sample demonstrates how to insert an emoji into the content of a Rich Text Editor. First, click the emoji button in the toolbar. This will open the emoji picker popup. Next, click on the desired emoji in the picker to insert it into the editor.

More Details...


The Emoji Picker feature allows you to insert an emoji into an editor. The emoji picker has a grid of emojis grouped by categories, such as smileys, animals, food, and travel. You are able to scroll through the emojis and click on one to insert it into the editor.

In this demo, to enable this feature, configure the EmojiPicker command in the toolbarSettings.items property.

You can also insert an emoji by pressing the colon (:) which will open the emoji picker. Choose an emoji from the picker and insert it into the editor. The feature also provides the option to filter emojis based on the typing character.

Injecting Module

The above features built as modules have to be included in your application. For example, to use image and link, inject the specific module using HtmlEditor, Toolbar, Link, Image, QuickToolbar, EmojiPicker, PasteCleanup.