Work with emoji in an editable div

Question

I use twemoji to display emoji in an input field (contaseditable div):

<div contenteditable="true" id="input_div"></div> 

the user can add emoji using an external button so that I can just add it to the div (let it not care about the caret position):

 div.innerHTML += twemoji.parse(emoji); 

next I need to get user input from a div with emoji, is there an easy way to convert back to Unicode characters?

my current solution is here (I just parse <img> to get the alt attribute), but I think it looks a little more complicated, and I can’t use the div.innerText property (it’s convenient enough to get plain text from the div), because I’ll lose emojis. I also use div.getInnerText to prevent pasting html or clipboard images:

 div.addEventListener("insert", () => {setTimeout(div.innerText = div.innerText,0)}) 

Answer 1

So, I created a working editable div with a beautiful twemoji tab, like WhatsApp!

I tweaked the Twemoji script a bit to make it work fine. A lot of work dude!

So here is the fidddle

and code to convert unicode to twemoji image and to switch tabs:

  function convert() { document.body.innerHTML = twemoji.parse(document.body.innerHTML); } convert(); $(document).delegate('.emoji-header button', 'click', function() { index = $(this).index() $('.emoji-panel').css({ 'transform': 'translateX(-' + index + '00%)' }); }); $('.emoji-panel .emojicon').on('click', function() { $('.message').append($('img', this).clone()); }); $('.message').on('keypress', function(event) { if (event.keyCode == 13 && !event.shiftKey) { event.preventDefault(); } }); 

Happy coding, great question by the way!