Emoji plugin with custom images (contains fix for default list showing up in custom list)

Hello there, While working on my project, I sought to add some custom emoji to the editor. Currently, it uses the emojify.js list, I presume? In an effort to improve this, I have changed the code so that you can now specify an array instead of a single emoji code, along with a fix I’ll detail below.

Customisation

I customised the code so that one can specify the custom images for the emoji in an array when instantiating Trumbowyg, like so:

$('textarea').trumbowyg({
    btns: [
        ['emoji']
    ],
    plugins: {
        emoji: {
            emojiList: [
                [':)', '../img/smileys/smile.png'],
                [':D', '../img/smileys/smile-big.png'],
                [':^^:', '../img/smileys/hehe.png'],
                [':happy:', '../img/smileys/happy.png']
            ]
        }
    }
});

And the changes in trumbowyg.emoji.js are as follows, replacing the block from line 925 to 936:

$.each(trumbowyg.o.plugins.emoji.emojiList, function (i, emoji) {
    if ($.isArray(emoji)) { // Custom emoji list
        var emojiCode = emoji[0],
            emojiUrl = emoji[1],
            emojiHtml = '<img src="' + emojiUrl + '" alt="' + emojiCode + '">',
            btnDef = {
                hasIcon: false,
                param: emojiHtml,
                fn: function () {
                    trumbowyg.execCmd('insertImage', emojiUrl, false, true);
                    return true;
                }
            };
        trumbowyg.addBtnDef(emojiHtml, btnDef);
        dropdown.push(emojiHtml);
    } else { // Default behaviour
        var btn = emoji,
            btnDef = {
                param: emoji,
                fn: function () {
                    trumbowyg.execCmd('insertText', emoji);
                    return true;
                }
            };
        trumbowyg.addBtnDef(btn, btnDef);
        dropdown.push(btn);
    }
});

Note: you can still use regular emoji if you use a string instead of an array I imagine there is room for improvement on this. For instance, when adding an emoji after text, it wraps in a new <p> tag, so I might have to dig deeper to understand how Trumbowyg works a bit better.

Fix

The fix I mentioned is the following: just like the colors plugin (in this comment), an issue led to the default list being merged with the custom list. Fixed by changing line 912 from: trumbowyg.o.plugins.emoji = $.extend(true, {}, defaultOptions, trumbowyg.o.plugins.emoji || {}); to: trumbowyg.o.plugins.emoji = trumbowyg.o.plugins.emoji || defaultOptions;

Maybe at least the above fix might be worth implementing in a future update? I realise I am proposing an edit that makes the editor a bit more customisable, which might not be great for the lightweightness of Trumbowyg. Anyway, that’s just my two cents.

Take care!

[Alex-D]

Thanks!

Can you make a pull request? 😃

[ghost]

@danman1234 https://github.com/Alex-D/Trumbowyg/issues/553