javascript - 在可编辑的 div 中使用表情符号

Question

我正在使用 twemoji在输入字段中显示表情符号的库(contanteditable div):

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

用户可以使用外部按钮添加表情符号，这样我就可以很简单地将它添加到 div(让我们不用关心插入符号的位置):

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

接下来我需要使用表情符号从 div 获取用户输入，是否有一些简单的方法可以将其转换回 unicode 字符？

我目前的解决方案 here (我只是解析 <img> 以获得 alt 属性)但我认为它看起来有点棘手，我不能使用 div.innerText属性(从 div 获取纯文本非常方便)因为我会丢失表情符号。我也在使用 div.getInnerText防止从剪贴板插入 html 或图像:

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

Answer 1

所以我创建了一个可工作的可编辑 div，带有漂亮的 twemoji 选项卡，就像 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();
    }
  });

祝你编码愉快，顺便问个好问题!