可編輯的div

Question

通過表情符號在工作我使用twemoji庫顯示在輸入字段的表情符號（contanteditable格）：

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

用戶可以使用外部按鈕添加表情符號，所以我可以把它添加到很簡單的div（讓不關心插入符的位置）：

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

接下來，我需要從表情符號股利獲取用戶輸入，有沒有轉換回unicode字符一些簡單的方法是什麼？

我目前的解決方案here（我只是解析<img>讓alt屬性），但我認爲它看起來有點複雜，我無法用div.innerText屬性（相當方便擺脫DIV純文本），因爲我失去了表情符號， 。另外我使用div.getInnerText防止插入HTML或圖片來自剪貼板：

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

Answer 1

所以我創建了一個漂亮的twemoji標籤工作可編輯的div，就像WhatsApp的！

我編輯了Twemoji腳本，使其工作完美。很多工作夥計！

因此，這裏是fidddle

和代碼將Unicode轉換爲twemoji形象，切換標籤：

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

編碼快樂，順便大問題！