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

发布时间：2020-12-14 22:37:40 所属栏目：资源来源：网络整理

导读：我正在使用twemoji库在输入字段中显示表情符号(contanteditable div)：用户可以使用外部按钮添加表情符号,这样我就可以非常简单地将它添加到div中(让我们不关心插入位置)： div.innerHTML += twemoji.parse(emoji); 接下来我需要用表情符号从div获取用户输

我正在使用twemoji库在输入字段中显示表情符号(contanteditable 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)})


最佳答案
所以我创建了一个可编辑的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();
    }
  });

快乐的编码,顺便说一下很棒的问题！
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!