Package Exports

luna-emoji
luna-emoji/src/emoji.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (luna-emoji) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CKEditor 5 Emoji plugin

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

Preview Image

Setup

Installation

To install it, run:

npm i --save @phudak/ckeditor5-emoji

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';

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,
]

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'
    ]
    },
};

Enjoy

Integration examples

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

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.