Option to display custom emoji

[gabrielepx]

I'm migrating a site to emoji, but I'd like (and our young users demand ;) to keep some of the old emoticons we used in these years. Would be possible to have a custom category with a list of emoticons specified by user in options?

[mervick]

You can customize filters option, but you can't add new emoji because emojionearea not provide emoji, it uses emojione: https://github.com/mervick/emojionearea/blob/dd2a048aff730546cdd7c8c56ca6c0881a992ba8/dist/emojionearea.js#L169-L339

[brunoniconeves]

@gabrielepx

I add custom emojis on the "picker.show" event, like the code example above.

            "picker.show": function () {
                var html = '<i class="emojibtn custom-emoji" role="button" data-name=":voadora:" title="Voadora"><img class="emojioneemoji" data-src="/mercado/images/icone-voadora.svg" src="/mercado/images/icone-voadora.svg"></i>';
                html += '<i class="emojibtn custom-emoji" role="button" data-name=":voadora-left:" title="Voadora"><img class="emojioneemoji" data-src="/mercado/images/icone-voadora-left.svg" src="/mercado/images/icone-voadora-left.svg"></i>';
                $('.emojionearea-category[name="smileys_people"] .emojionearea-category-title').after(html);

                $('.custom-emoji').each(function () {
                    $(this).click(function () {
                        tinymce.get(editor).execCommand('mceInsertContent', false, '<img class="emoji" src="' + $(this).find('img').attr("src") + '"/>');
                    });
                });
            }

You will need to attach a event to handle click on custom emoji (look the custom class emojibtn-custom-emoji).

It's possible to create even custom categories with more html code...this is a example.

ATENTION: the custom emojis will not be placed among the recent ones picked. It's a hack to satisfy business requirement for now...and there can be other issues not mapped.

Result

[pengkong]

I followed @brunoniconeves idea and did some modifications, instead of adding the custom emoji buttons (everytime) on picker.show I added the buttons (once) on ready, and instead of adding the custom emoji into the smileys group, I created a new category called "Disco Party" and add it before() the "Recent" group as adding it after() "Recent" seems to interfere with the category shortcuts at the top of the picker.

ready: function () {
    $('.emojionearea-category[name="recent"]').before(
        '<div class="emojionearea-category" name="disco_party" data-tone="0">'+
            '<div class="emojionearea-category-title">Disco Party</div>'+
            '<i class="emojibtn" role="button" data-name=":angry_bird_red:" title="Angry Bird Red">'+
                '<img class="emojioneemoji" src="https://example.com/angry-bird-red.png">'+
            '</i>'+
            '<i class="emojibtn" role="button" data-name=":angry_bird_blue:" title="Angry Bird Blue">'+
                '<img class="emojioneemoji" src="https://example.com/angry-bird-blue.png">'+
            '</i>'+
            '<i class="emojibtn" role="button" data-name=":angry_bird_yellow:" title="Angry Bird Yellow">'+
                '<img class="emojioneemoji" src="https://example.com/angry-bird-yellow.png">'+
            '</i>'+
        '</div>');
    $('.emojionearea-category[name="disco_party"] i').each(function () {
        $(this).on('click', function() {
            pasteHtmlAtCaret('<img alt="'+$(this).data("name")+'" class="emojioneemoji" src="'+$(this).find('img').attr("src")+'">');
        });
    });
}

To make the above code work, I copied the function pasteHtmlAtCaret into my js file. Notes: I'm using saveEmojisAs: 'shortname'. If you encounter an issue where the custom emoji changes to shortcode upon dismissing the picker, commenting out this line will solve the issue. (yep, not the best solution, but does the job for now)