本文首发在我的个人博客上：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编码

js文件下载

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

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