CKEditor 5 Emoji plugin

Emoji plugin using a modified version of the ckeditor5 SpecialCharacters plugin.

Setup

1. Installation

To install it, run:

npm i --save @phudak/ckeditor5-emoji

2. Importing modules

Import the Emoji plugin with all optional categories. If you want to exclude some category, don't import it.

import {
    Emoji, EmojiActivity, EmojiFlags, EmojiFood, EmojiNature, EmojiObjects, EmojiPeople,
    EmojiPlaces, EmojiSymbols
} from '@phudak/ckeditor5-emoji/src';

3. Add imported modules to plugins

Add the Emoji plugin and optional categories to CKEditor plugins.

Add plugin to build:

InlineEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [
            ...,
            Emoji,
            EmojiPeople,
            EmojiNature,
            EmojiPlaces,
            EmojiFood,
            EmojiActivity,
            EmojiObjects,
            EmojiSymbols,
            EmojiFlags,
        ],
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err.stack );
    } );

or add plugin to custom editor builder:

InlineEditor.builtinPlugins = [
    ...
    Emoji,
    EmojiPeople,
    EmojiNature,
    EmojiPlaces,
    EmojiFood,
    EmojiActivity,
    EmojiObjects,
    EmojiSymbols,
    EmojiFlags,
]

4. Add the Emoji plugin to toolbar

Add plugin to build:

InlineEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [...],
        toolbar: [ ... , 'emoji' ],
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err.stack );
    } );

or add plugin to custom editor builder:

InlineEditor.defaultConfig = {
    toolbar: {
        items: [
            ...,
        'emoji',
        '|',
        'undo',
        'redo'
    ]
    },
};

5. Enjoy

Integration examples

You can check my Emoji plugin integration into custom CKEditor builds here:

• @phudak/ckeditor5-build-inline-simple
• @phudak/ckeditor5-build-inline-basic
• @phudak/ckeditor5-build-inline-full

Emoji Set

Emoji are divided into categories:

• All
• Activity
• Food
• Flags
• Nature
• Objects
• People
• Places
• Symbols

You can choose specific categories or import all of them.