emoji web端处理

1、发送给服务器端的信息,因为图片是选择的在web端只提供了50个表情选择,所以将 #哈哈# ,凡是#  #包裹的内容转化成对应的unicode编码, 比如U+1F603。每一个对应起来,这一点比较麻烦。

2、服务器发过来的信息 将里面U+1f603 这种 u+开头的转化成<span class="emoji emoji1f603 "></span>,再根据emoji.js emoji.css emoji.png这三个文件 显示出图片。

3、代码链接:链接:https://pan.baidu.com/s/1nsuzW7o7_CaaHLWXgdsP2Q 密码:br1u;运行里面的test.html可看效果。

html和js代码:

<!DOCTYPE html>
<html lang="en-us">

    <head>
        <meta charset="UTF-8">
        <title>jQuery-emoji by eshengsky</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" media="all" href="emoji.css" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/jquery.emoji.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css" />
        <script src="js/jquery.mCustomScrollbar.min.js"></script>
        <script src="js/jquery.mousewheel-3.0.6.min.js"></script>
        <script src="js/highlight.pack.js"></script>
        <script src="js/jquery.emoji.min.js"></script>
    </head>

    <body>
        
        <span class="emoji emoji1f51d "></span>
        <section class="main-content container">
            
            <div class="row m-t-20">
                <div class="col-md-6">
                    <textarea id="editor" contenteditable="true" value="U+2600"></textarea>
                    <button id="btn" class="btn btn-sm btn-default">加载图片</button>
                    <button class="fasong">发送</button>
                </div>
            </div>
            <div class="getinfo" id="getinfo" style="border: 1px solid black;min-height: 200px;">
                <div class="add"></div>
            </div>
        </section>
        
        <script>
            hljs.initHighlightingOnLoad();
            $("#editor").emoji({
                button: "#btn",
                showTab: false,
                animation: 'slide',
                icons: [{
                    path: "img/qq/",
                    file: ".png",
                    maxNum: 50,
                    excludeNums: [],
                    placeholder: "#{alias}#",
                    alias: {
                        1: "微笑",
                        2: "大笑",
                        3: "笑哭",
                        4: "发呆",
                        5: "睡觉",
                        6: "尴尬",
                        7: "抓狂",
                        8: "天使",
                        9: "眨眼",
                        10: "可爱",
                        11: "吃",
                        12: "闭眼",
                        13: "喜欢",
                        14: "酷",
                        15: "得意",
                        16: "闭嘴",
                        17: "口罩",
                        18: "难过",
                        19: "囧",
                        20: "吃惊",
                        21: "撇嘴",
                        22: "混乱",
                        23: "吹口哨",
                        24: "飞吻",
                        25: "亲",
                        26: "害羞",
                        27: "无表情",
                        28: "大眼睛",
                        29: "伸舌头",
                        30: "不高兴",
                        31: "不开心",
                        32: "生气",
                        33: "愤怒",
                        34: "流鼻涕",
                        35: "饥饿",
                        36: "抓狂",
                        37: "流汗",
                        38: "叹气",
                        39: "惊讶",
                        40: "生病",
                        41: "快哭了",
                        42: "哈欠",
                        43: "可怜",
                        44: "张嘴笑",
                        45: "哭",
                        46: "糗大了",
                        47: "卖萌",
                        48: "委屈",
                        49: "右哼哼",
                        50: "很开心"
                    }
                }]
            });
//            接受服务器传来的u+unicode后转码成图片
            function toUnicode(s){
              return s.replace(/(u\+{1}[0-9a-fA-F]{4,6})/ig,function(a){
                  a=a.toLowerCase().substr(2);
                return "<span class='emoji emoji"+a+"'></span>";
              });
              } 
              var arremoji=[
                  {'zcname':'微笑','emojicode':'1F604'},
                  {'zcname':'大笑','emojicode':'1F601'},
                  {'zcname':'笑哭','emojicode':'1F602'},
                  {'zcname':'发呆','emojicode':'1F633'},
                  {'zcname':'睡觉','emojicode':'1F634'},
                  {'zcname':'尴尬','emojicode':'1F605'},
                  {'zcname':'抓狂','emojicode':'1F606'},
                  {'zcname':'天使','emojicode':'1F607'},
                  {'zcname':'眨眼','emojicode':'1F609'},
                  {'zcname':'可爱','emojicode':'263A'},
                  {'zcname':'吃','emojicode':'1F60B'},
                  {'zcname':'闭眼','emojicode':'1F60C'},
                  {'zcname':'喜欢','emojicode':'1F60D'},
                  {'zcname':'酷','emojicode':'1F60E'},
                  {'zcname':'得意','emojicode':'1F60F'},
                  {'zcname':'闭嘴','emojicode':'1F567'},
                  {'zcname':'口罩','emojicode':'1F637'},
                  {'zcname':'难过','emojicode':'1F612'},
                  {'zcname':'囧','emojicode':'1F613'},
                  {'zcname':'吃惊','emojicode':'1F632'},
                  {'zcname':'撇嘴','emojicode':'1F615'},
                  {'zcname':'混乱','emojicode':'1F616'},
                  {'zcname':'吹口哨','emojicode':'1F617'},
                  {'zcname':'飞吻','emojicode':'1F618'},
                  {'zcname':'亲','emojicode':'1F60C'},
                  {'zcname':'害羞','emojicode':'1F61A'},
                  {'zcname':'无表情','emojicode':'1F636'},
                  {'zcname':'大眼睛','emojicode':'1F61C'},
                  {'zcname':'伸舌头','emojicode':'1F61D'},
                  {'zcname':'不高兴','emojicode':'1F61E'},
                  {'zcname':'不开心','emojicode':'1F61F'},
                  {'zcname':'生气','emojicode':'1F620'},
                  {'zcname':'愤怒','emojicode':'1F621'},
                  {'zcname':'流鼻涕','emojicode':'1F622'},
                  {'zcname':'饥饿','emojicode':'1F623'},
                  {'zcname':'抓狂','emojicode':'1F624'},
                  {'zcname':'流汗','emojicode':'1F625'},
                  {'zcname':'叹气','emojicode':'1F626'},
                  {'zcname':'惊讶','emojicode':'1F627'},
                  {'zcname':'生病','emojicode':'1F628'},
                  {'zcname':'快哭了','emojicode':'1F629'},
                  {'zcname':'哈欠','emojicode':'1F62A'},
                  {'zcname':'可怜','emojicode':'1F62B'},
                  {'zcname':'张嘴笑','emojicode':'1F62C'},
                  {'zcname':'哭','emojicode':'1F62D'},
                  {'zcname':'糗大了','emojicode':'1F631'},
                  {'zcname':'卖萌','emojicode':'1F62E'},
                  {'zcname':'委屈','emojicode':'1F630'},
                  {'zcname':'右哼哼','emojicode':'1F63E'},
                  {'zcname':'很开心','emojicode':'1F63A'},
              ];
//              发送给后台的转换
            function toUnicode2(s){
                  return s.replace(/(?:#{1}[\u4e00-\u9fa5]{1,3}#{1})/g,function(a){
                  a=a.replace(/#/g,'');
                  console.log(a);
                  for(var i=0;i<arremoji.length;i++){
                      if(a==arremoji[i].zcname){
                          return 'u+'+arremoji[i].emojicode;
                      }
                  }
              });
              } 
            $('.fasong').click(function() {
                var val = $("#editor").val();
                val=toUnicode(val);
                $('#getinfo').append('<div class="add"></div>');
                $('.add').last().html(val);
//                发送内容给服务器端
                var rescc=toUnicode2(val);
                console.log(rescc);
                $(".add").emojiParse({
                    icons: [{
                        path: "img/qq/",
                        file: ".png",
                        placeholder: "#{alias}#",
                        alias: {
                            1: "微笑",
                            2: "大笑",
                            3: "笑哭",
                            4: "发呆",
                            5: "睡觉",
                            6: "尴尬",
                            7: "抓狂",
                            8: "天使",
                            9: "眨眼",
                            10: "可爱",
                            11: "吃",
                            12: "闭眼",
                            13: "喜欢",
                            14: "酷",
                            15: "得意",
                            16: "闭嘴",
                            17: "口罩",
                            18: "难过",
                            19: "囧",
                            20: "吃惊",
                            21: "撇嘴",
                            22: "混乱",
                            23: "吹口哨",
                            24: "飞吻",
                            25: "亲",
                            26: "害羞",
                            27: "无表情",
                            28: "大眼睛",
                            29: "伸舌头",
                            30: "不高兴",
                            31: "不开心",
                            32: "生气",
                            33: "愤怒",
                            34: "流鼻涕",
                            35: "饥饿",
                            36: "抓狂",
                            37: "流汗",
                            38: "叹气",
                            39: "惊讶",
                            40: "生病",
                            41: "快哭了",
                            42: "哈欠",
                            43: "可怜",
                            44: "张嘴笑",
                            45: "哭",
                            46: "糗大了",
                            47: "卖萌",
                            48: "委屈",
                            49: "右哼哼",
                            50: "很开心"
                        }
                    }]
                });

            })
        </script>
    </body>

</html>

 

posted @ 2018-06-27 09:27  盖大楼  阅读(830)  评论(2编辑  收藏  举报