html显示emoji表情,在web页面显示emoji表情

最近在做项目的时候，有这么一个需求。pc端评论页面的时候要能插入表情。并且还要能同步移动端的。心想这是什么鬼需求。起初想到采用百度的

富文本编辑器ueditor。但是他里面自带的表情无法同步的移动端。

那怎么让pc上的东西在移动端显示呢。没办法。客户就是上帝啊。客户提的所有需求都要满足。于是就在网上查找了有关资料。想到了采用

国际通用的emoji表情来作为web平台的输入。

这是我找的资料，讲的还算详细。但缺少具体实列。

参考资料

1.首先我们要把所有的emoji表情给显示出来,好让用户进行选择

这里是结构，样式的话我就不列举出来了。自行脑补吧

:)

2.接下来就是行为层了

通过按钮触发emoji表情，并把表情内容加载到emoji-cont中。

//生成emoji 并把emoji表情加载到emoji-cont中进行显示。

$("#btn").click(function(){

$(".emoji-cont").html("");

$(".emoji-cont").stop().toggle();

renderEmoji();

$(".emoji-icon").each(function(k,v){

$(v).click(function(){

var code=$(this).attr("unicode16");

console.log(parse(code));

$("#content-icon").append(parse(""+parseInt(code,16)+";"));

});

});

});

function renderEmoji(){

var emos = getEmojiList()[0];

var html = '

• ';

for (var j= 0; j

var emo = emos[j];

var data = 'data:image/png;base64,' + emo[2];

if (j % 20 == 0) {

html += '

';

} else {

html += '

';

}

html += '

';

}

$(".emoji-cont").append(html);

}

//通过该方法。可以直接把表情在输入框中显示出来。

function parse(arg) {

if (typeof ioNull !='undefined') {

return ioNull.emoji.parse(arg);

}

return '';

};

以上这些都必须按依赖加载如下3个js文件

1.emoji-list-with-image.js 存储emoji编码和表情图片数据，格式如["e415","1f604","iVBORw0KGg..."]

2.punycode.js 编码解析库

3.emoji.js 解析emoji编码

如果觉得有帮助的话，麻烦右上角轻轻star下哦

有不足的地方，请各位大神指正！谢谢！