tinymce-emoji

This simple tinymce plugin adds a helper dialog to insert native emojis in to your content.

All emoji were stripped from this test doc made available by The Unicode Consortium

Example on JSFiddle

Usage

Install via npm:

npm install --save tinymce-emoji

Add to your tinymce init:

import 'tinymce-emoji'
import 'tinymce'    // always import tinymce after any plugins
 
tinymce.init({
    plugins: [
        'tinymceEmoji'
    ],
    toolbar: 'tinymceEmoji'
})

Alternatively, you can install this plugin via script tags:

<script src="path/to/tinymce-emoji/dist/plugin.min.js"></script>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
    tinymce.init({
        plugins: [
            'tinymceEmoji'
        ],
        toolbar: 'tinymceEmoji'
    })
</script>

You can also configure a few options for tinymce-emoji by adding them to your tinymce init, like so:

tinymce.init({
    plugins: [
        'tinymceEmoji'
    ],
    toolbar: 'tinymceEmoji',
    emoji_add_space: false, // emoji are quite wide, so a space is added automatically after each by default; this disables that extra space
    emoji_show_groups: false,   // hides the tabs and dsiplays all emojis on one page
    emoji_show_subgroups: false,    // hides the subheadings
    emoji_show_tab_icons: false, // hides the icon on each tab label
    ...
})

NOTE: by default, all options above are set to true

A note about speed

Unfortunately, the first time you load the emoji dialog during each editor session, it takes a few seconds to display, during which time the browser window is frozen. I have been unable to resolve this issue and the world's worst docs didn't help. If you're a developer who knows how to resolve this, please do make a PR!