Trumbowyg: Add an option for inserting smiley markup

[AttitudeMonger]

I want to give an additional button for inserting smileys. When user clicks the button, a popup is shown nearby displaying some 30 smiley icons, clicking any of which inserts that into the caret position.

How do I add this button and the functionality here?

[Alex-D]

Idk. Maybe on the color plugin base, changing colors squares by smileys and by calling insertImage with the smiley URL.

[graphek]

any progress on this? i'm interested as well!

[AttitudeMonger]

Not sure right now. I am planning to do it like Facebook, let the users use markup like :) or :( in the text, then at the time of getting the HTML and pasting ti back, parse through such markups, convert them to respective inline images and render alongwith the rest of the content.

[graphek]

Sounds good! I'm currently looking in a implemenation with at.js

[ghost]

Hi,
I do this (based on colors plugin + emojify.js), but i dont know if i can do a pull-request because it depends on emojifyjs :

[graphek]

@NicolasPion
wow, thats an awesome implementation! It would be really great, if you could share the code somehow :) I think that would be a great enhancement for the trumbowyg editor, emojis is the only thing i missed on the editor.

this is how it works wit my At.js implementation right now, but i like yours better:

best regards

[ghost]

@graphek, thanks !
PR & files : https://github.com/Alex-D/Trumbowyg/pull/354
;-)

[Alex-D]

You can PR them in two plugins :)

[muyiwaoyeniyi]

@NicolasPion There is an issue with the scroll bar in the emoji dropdown.

Testing in:
Chrome 54.0.2840 and Latest Firefox
Ubuntu 16.04

Using version 2.3.0 but I replicated this issue in 2.4.2

You can't click on the emoji scroll bar. When you do so, the emoji dropdown goes away. I believe this is happening because the dropdown as a whole has a close on click event attached to it. But that affects the scroll bar. The emojis themselves probably need a container separate from the dropdown container.

I tried to track down where this is done in you code but I couldn't. If you point me in the right direction, maybe I can fix it. Thanks.

Thanks.

[ghost]

Hi @muyiwaoyeniyi , i think it's not emoji plugin related (you can reproduce this issue with the "color" plugins for exemple, if you dont click on a color icon but you click inside the dropdown.. in a "white" area)

but this PR can resolve that 😈 : https://github.com/Alex-D/Trumbowyg/pull/459

[muyiwaoyeniyi]

@NicolasPion Thanks for the response and PR.. Yea I didnt try out the color plugin. But good to know.

All the best.

[Alex-D]

Merged :)

[danman1234]

Helo, i have done the emojifyjs : plugin, i get smileys, with text, but how to get the images inside the div??

[ghost]

@danman1234, you can add something like :

function handleEmoji()
{
    emojify.setConfig({
        img_dir : '/vendor/emojify.js/dist/images/basic',
    });
    emojify.run();  
}

$('.trumbowyg-editor').bind('input propertychange', function() {
    handleEmoji();
});

[danman1234]

This works, but as before too sometimes it shows the smiley ico and othertimes not.
It looks a bit hacky.

If i refeesh 4 times, then the smiley ico will show up.
Also i want to remove tons of smileys, i just need 10 for faster laoding, but in trumpowyg.emoji.js i have removed a lot from the:

var defaultOptions = {
    emojiList:

but then it never shows up anymore.
If i use the full list then it shows up but also after an average of 4 times loading.

[ghost]

@danman1234 try this PR (not yet merged) : https://github.com/Alex-D/Trumbowyg/pull/548
With this PR, you can specify an array of icons (ex here: https://github.com/Alex-D/Trumbowyg/issues/547), and you dont need anymore emojify.js

[Ydalb]

hey @graphek : possible to share your at.js implementation please ? :)

[graphek]

@Ydalb Sorry, i dont have the code for the smilies anymore because i liked the toolbar-version more. But i still use At.js for @mentions like this:

` // @MENTIONS

    $(selector).atwho({
      at: "@",
      data: this.api+'users/getForMentions',
      displayTpl: '<li class="mentionLi"><img src="'+this.cdn+'/avatare/${avatar}" alt="${name}" /> ${name} </li>',
      insertTpl: '<span class="mention" value="${slug}">${name}</span>',
    });`

Insert after initialization of trumbowyg

best regards

[Ydalb]

Nevermind @graphek , I also implemented the toolbar-version :D

But I also use at.js for mentions, love it ❤️

[mavinalim]

@Ydalb @graphek Sorry to open up this post. How did you guys integrate @mention? I was able to use At.js to integreat into regular textarea but I am unable to make it with with Trumbowyg editor. It only works if i switch the editor into source code mode where you can see the html tags. Thanks :)