@linhx/ckeditor5-emoji2

Inserting images as emoji.

Usage

npm i @linhx/ckeditor5-emoji2

Read Installing plugins

Import css

import '@linhx/ckeditor5-emoji2/theme/emoji2.css';

Add to toolbar

    toolbar: {
        items: [
            ...
            'emoji2',
            ...
        ]
    },

Config plugin

{
    emoji2: {
        class: string, // your css class of emoji, default is "em"
        defaultGroup: string, // the default group name, for selecting the default group tab when showing the grid
        groups: Map<string, Array<{key: string; name?: string; imgUrl: string}>>, // Map of groups of emojis, e.g. { people: [{ key: 'grinning', name: 'Grinning', imgUrl: '/url' }] }
    }
}

Use my default emojis (the messenger emojis)

1. Import emoji groups:

   import { emojiGroups } from '@linhx/ckeditor5-emoji2/src/emojisList'

   {
       emoji2: {
           defaultGroup: 'p', // people
           groups: emojiGroups
       }
   }

2. Download https://github.com/linhx/ckeditor5-emoji2/tree/master/sample/assets/emojis and copy to your public assets folder, make sure emoji images can be accessed through yourdomain.com/assets/emojis/<name>.png

And this is the result https://linhx.github.io/ckeditor5-emoji2/