本文首发在我的个人博客上：http://brownbear.top
项目地址是:https://github.com/sobrown
最近在做项目的时候，有这么一个需求。pc端评论页面的时候要能插入表情。并且还要能同步移动端的。心想这是什么鬼需求。起初想到采用百度的
富文本编辑器ueditor。但是他里面自带的表情无法同步的移动端。
那怎么让pc上的东西在移动端显示呢。没办法。客户就是上帝啊。客户提的所有需求都要满足。于是就在网上查找了有关资料。想到了采用
国际通用的emoji表情来作为web平台的输入。
这是我找的资料，讲的还算详细。但缺少具体实列。
参考资料
1.首先我们要把所有的emoji表情给显示出来,好让用户进行选择
这里是结构，样式的话我就不列举出来了。自行脑补吧
<div class="text">
<div id="content-icon" contenteditable="true" class="icon-area"></div>
<button id="btn" class="btn btn-sm btn-default">:)</button>
<div class="emoji-cont"></div>
</div>
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 = '<ul class="clearfix">';
for (var j= 0; j<emos.length; j++){
var emo = emos[j];
var data = 'data:image/png;base64,' + emo[2];
if (j % 20 == 0) {
html += '<li class="">';
} else {
html += '<li>';
}
html += '<img style="display: inline;vertical-align: middle;" src="' + data + '" unicode16="' + emo[1] + '" class="emoji-icon" /></li>';
}
$(".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下哦
有不足的地方，请各位大神指正！谢谢！
