Working with emoji in editable div

Question

I'm using twemoji library to display emoji in input field (contanteditable div):

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

user can add emoji using external button so I can add it to div quite simply (lets don't care about caret position):

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

next I need to get user input from the div with emoji, is there some simple way to convert back into unicode chars?

my current solution here (I just parse <img> to get alt attribute) but I think it looks a bit tricky and I can't use div.innerText property (quite convenient to get plain text from div) because I'll lost emojis. Also I'm using div.getInnerText to prevent inserting html or images from the clipboard:

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

Answer 1

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

I edited the Twemoji script a bit to make it work perfect. LOT OF WORK dude!

So here is the fidddle

and the code to convert the unicode to a 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!