Emoji Plugin 😀😀😀

This plugin provides support for convenient insertion of emojis in a unified, platform-independent way. Emojis can be inserted by typing codes based on Unicode Short Names in the editor, or by using a button on the toolbar that opens a dropdown list of emojis.

The emoji dropdown allows you to filter the list, navigate through categories, or search for suitable emojis.

The keyword matching feature ensures that when searching for a term (e.g., "doctor"), related matches will also be displayed (such as ":face_with_medical_mask:", ":man_health_worker:", ":woman_health_worker:", ":hospital:" or ":pill").

The Emoji plugin implements an autocomplete feature. It includes an autocomplete component that will display available emojis after the user types a colon (":") in the editor content.

Installation

Add "emoji" to your Jodit editor's plugin list:

const editor = Jodit.make('#editor', {
    extraPlugins: ['emoji']
});
Copy

Usage

Via Toolbar

The plugin adds an "Emoji" button to the editor toolbar in the "insert" group. When you click on this button, a dropdown list with emojis grouped by categories opens.

const editor = Jodit.make('#editor', {
    buttons: ['emoji'],
    extraPlugins: ['emoji']
});
Copy

Via Autocomplete

If the enableAutoComplete option is enabled (by default), you can type emojis starting with a colon (":") followed by the emoji name. For example, :smile: or :heart:.

Data Parsing

By default, the emoji list is loaded from a built-in JSON file that was created based on https://raw.githubusercontent.com/github/gemoji/master/db/emoji.json and processed. You can run the node utils/parse.js file to get the latest version of this list.

Options

enableAutoComplete

• Type: Boolean
• Default: true

Enables or disables the emoji autocomplete feature. If enabled, the user can type emojis starting with a colon (":").

Jodit.make('#editor', {
    emoji: {
        enableAutoComplete: true // Start with : to insert emoji. Type at least 2 characters, e.g., :sm
    }
});
Copy

recentCountLimit

• Type: Number
• Default: 10

Defines the maximum number of recently used emojis that will be displayed in the "Recent" section.

Jodit.make('#editor', {
    emoji: {
        recentCountLimit: 100 // Show the last 100 selected emojis
    }
});
Copy

data

• Type: Function
• Default: Built-in emoji list

A function that returns emoji data. It can return an object or a Promise that resolves to an object with emoji data.

Data format:

interface IEmojiData {
    categories: string[]; // Array of categories
    emoji: Array<{
        e: string; // Emoji character
        d: string; // Description
        c: number; // Category index
        a?: string[]; // Aliases (optional)
        t?: string[]; // Tags (optional)
    }>;
}
Copy

Example with Local Data

Jodit.make('#editor', {
    emoji: {
        data: () => ({
            categories: ['Smileys & Emotion'],
            emoji: [
                {
                    e: '😀',
                    d: 'grinning face',
                    c: 0,
                    a: ['grinning'],
                    t: ['smile', 'happy']
                },
                {
                    e: '😃',
                    d: 'grinning face with big eyes',
                    c: 0,
                    a: ['smiley'],
                    t: ['happy', 'joy', 'haha']
                }
            ]
        })
    }
});
Copy

Example with Remote Data Source

Jodit.make('#editor', {
    emoji: {
        data: () =>
            fetch('https://some.com/emoji.json').then((res) => res.json())
    }
});
Copy

Examples

Basic Usage

const editor = Jodit.make('#editor', {
    buttons: ['emoji'],
    extraPlugins: ['emoji']
});
Copy

Configuring Recent Emoji Limit and Disabling Autocomplete

const editor = Jodit.make('#editor', {
    buttons: ['emoji'],
    extraPlugins: ['emoji'],
    emoji: {
        enableAutoComplete: false, // Disable autocomplete
        recentCountLimit: 20 // Show 20 recent emojis
    }
});
Copy

Using a Custom Emoji Set

const editor = Jodit.make('#editor', {
    buttons: ['emoji'],
    extraPlugins: ['emoji'],
    emoji: {
        data: () => ({
            categories: ['Favorites', 'Animals'],
            emoji: [
                {
                    e: '❤️',
                    d: 'heart',
                    c: 0,
                    a: ['love'],
                    t: ['love', 'red']
                },
                {
                    e: '👍',
                    d: 'thumbs up',
                    c: 0,
                    a: ['like'],
                    t: ['good', 'approve']
                },
                {
                    e: '🐱',
                    d: 'cat',
                    c: 1,
                    a: ['kitty'],
                    t: ['animal', 'pet']
                },
                {
                    e: '🐶',
                    d: 'dog',
                    c: 1,
                    a: ['puppy'],
                    t: ['animal', 'pet']
                }
            ]
        })
    }
});
Copy