question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Alex-Dcommented, May 16, 2017

Thanks!

Can you make a pull request? 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Emoticons plugin | Docs - TinyMCE
This plugin adds a dialog to the editor lets users insert emoji into TinyMCE's editable area. The dialog can be invoked via a...
Read more >
Custom emoticons/emoji list? - feature - Discourse Meta
yml in the custom command section I have a line that backs up the default laughing.png and then it wgets the replacement smiley...
Read more >
Emoji Compatibility - Android Developers
The EmojiCompat support library aims to keep Android devices up to date with the latest emoji. It prevents your app from showing missing...
Read more >
How to add images in select list? - Stack Overflow
By extension, your icons can be stored in a custom font. ... Here I've extended to show a list of Expansions, which also...
Read more >
awesome_notifications | Flutter Package - Pub.dev
image. Working progress percentages of awesome notifications plugin ... all Android layouts for iOS (almost accomplished); Custom layouts for notifications ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found