javascript - 使用 Emoji One Area 在 div 中显示表情符号

Question

我正在使用 Emoji One Area 表情符号选择器。请检查 fiddle : 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/