jQuery-emojl.js 实现web表情

插件官网

首先你得引入jquery.min.js 插件，至于怎么下载就不过多说明。看上面链接

这个插件是一个使用起来方便，各种表情可以自己定制，支持gif 和 png 等格式

        这里的emoji()方法是插件封装好的直接调用就可以！

        list里面简单说明一下，
        1.          name:就是选项卡标题。
        2.        path:就是你的表情图片的路径。
        3.        suffix:就是表情图的文件格式。（文件后缀名）
        4.        max_number:很显然就是表情的最大个数。
    $("#ele").emoji({content_el:"#content",
        list:[
            {
                name:"QQ表情",
                code:"qq_",
                path:"./face/emoji1/",
                suffix:".gif",
                max_number:25
            },
            {
                name:"emoji",
                code:"em_",
                path:"./face/emoji2/",
                suffix:".png",
                max_number:22
                }
            ,
                {
                    name:"其他",
                    code:"other_",
                    path:"./face/emoji3/",
                    suffix:".png",
                    max_number:1
                    }
            ]
        });

    下面这个就是一个发送按钮 
    #result就是发送以后表情显示的位置

        $("#send").click(function(){
            var content = $("#content").val();
            content = replace_em(content);
            $("#result").html(content);
            $("#content").val('');
        });
    })

    //表情格式替换
    function replace_em(str){
        str = str.replace(/\</g,'<');
        str = str.replace(/\>/g,'>');
        str = str.replace(/\n/g,'<br/>');
        str = str.replace(/\[qq_([0-9]*)\]/g,"<img src='./face/emoji1/$1.gif' />");
        str = str.replace(/\[em_([0-9]*)\]/g,"<img src='./face/emoji2/$1.png'  />");
        str = str.replace(/\[other_([0-9]*)\]/g,"<img src='./face/emoji3/$1.png' />");
        return str;

    }

    这里面要注意的是格式转换的路径要保持一致

</script>

转载于:https://blog.51cto.com/13740530/2114534