使用 Emoji One Area 在 div 中显示 emoji

【问题标题】：Display emoji in a div using Emoji One Area使用 Emoji One Area 在 div 中显示 emoji
【发布时间】：2017-05-17 10:50:04
【问题描述】：

我正在使用 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);
})

【问题讨论】：

标签： javascript jquery emoji emojione

【解决方案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 sn-p:

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

【讨论】：