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

快乐的编码，顺便提一下很棒的问题！

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

1 个答案: