Praca z emotikonami w edytowalny div

Question

Używam twemoji bibliotekę wyświetlanie emotikonów w polu tekstowym (contanteditable dz):

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

użytkownik może dodawać emotikony za pomocą przycisku zewnętrznego, więc mogę go dodać do dział po prostu (pozwala nie dbają o położeniu karetki):

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

następny trzeba uzyskać dane wejściowe użytkownika z div z emotikonami, czy jest jakiś prosty sposób przekonwertować z powrotem do znaków unicode?

moje obecne rozwiązanie here (ja po prostu analizować <img> aby atrybut alt), ale myślę, że to wygląda trochę trudne i nie mogę używać div.innerText własność (dość wygodne, aby dostać tekst z div) bo ja straciłem emotikony . Również używam div.getInnerText aby zapobiec włożeniem HTML lub obrazów ze schowka:

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

Answer 1

Więc stworzyłem pracę edycji div z piękną kartę twemoji, podobnie jak WhatsApp!

Dokonałem edycji skryptu Twemoji, aby działał idealnie. DUŻO CZŁOWIEKA!

Więc tutaj jest fidddle

i kod do konwersji unicode do obrazu twemoji i przełączyć zakładki:

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(); 
    } 
    }); 

Szczęśliwy kodowanie, wielkie pytanie przy okazji!