javascript - 使用 Emoji One Area 在 div 中显示 emoji

Question

我正在使用 Emoji One Area 表情符号选择器。请检查小提琴： https ://jsfiddle.net/ukLaz8cm/40/

它工作正常。但如果像 Punch Tone1 和其他一些表情符号无法在显示 div 上正确显示并得到一些框类型符号。如何正确显示它们。

<div class="row">
  <div class="span6">
    <textarea id="emojionearea1"></textarea>
  </div>
</div>
<button id="click">preview</button>
<div id="display">
</div>

$(document).ready(function() {
    $("#emojionearea1").emojioneArea({

        pickerPosition: "right",
        tonesStyle: "bullet",

    });
});

$("#click").click(function(){
text =  $("#emojionearea1").val();
//alert(text);
$("#display").html(text);
})

Answer 1

emojionearea使用emojione

因此，您可以使用 emojione 辅助函数toImage来转换 unicode 字符（表情符号）和短名称（例如 :smile:），如下所示：

HTML：

<div class="hasEmoji">Text here  Text here </div>

Javascript：

jQuery(".hasEmoji").each(function(){
    var preview = emojione.toImage(jQuery(this).html());
    jQuery(this).html(preview);
});

这里修改了你的jsfiddle片段：

https://jsfiddle.net/ukLaz8cm/96/