web支持emoji显示和发送

1、页面需引入三个js包；分别为：emoji-list-with-image.js；emoji.js；punycode.min.js。按顺序引入；js包下载地址为

http://www.it165.net/uploadfile/files/2014/0904/emoji-lib.zip或点击下载。

2、页面需定义的核心方法

/* 展示表情库 */

function appendEmo(index){

var emos = getEmojiList()[index];

var html = '<ul class="emoType clearfix"><li>默认</li><li>符号表情</li><li>物品</li><li>建筑</li><li>数字</li><span class="tipemo"></span></ul><ul class="ulemo 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='' οnclick='sel(this)' >";

} else {

html += '<li οnclick="sel(this)" >';

}

html += "<img style='display: inline;vertical-align: middle;' src=" + data + "  unicode16= " + emo[1] + " /></li>";

}

$("#ad").html(html);

}

讲解：index 为数值，显示emoji表情库的第index组的表情；效果截图如下：

/* 显示emoji表情 */

function renderEmoji() {

//alert(3);

appendEmo(0);

$('.abemo').show();

}

//反解析（web上，图片数据转为emoji字符编码存储）

function decode(htmlStr) {

//todo 正则替换性能更优？unicode16='1f603'

if ( typeof ioNull == 'undefined') {

return '';

}

var tempStr = htmlStr, unis = '', $imgs = $('<div>').append(htmlStr).find('img');

$.each($imgs, function(i, o) {

var $img = $(o);

var unicode16 = '0x' + $img.attr('unicode16');

//十六进制

unicode16 = ioNull.emoji.decodeChar(unicode16);

//unis += unicode16;

tempStr = tempStr.replace($('<div>').append($img).html(), unicode16);

});

//System.log(unis)

return tempStr;

};

/** 

*解析成表情

*/

function parse(arg) {

if ( typeof ioNull != 'undefined') {

return ioNull.emoji.parse(arg);

}

return '';

}

/**

 * 选择表情

 */

function sel(s) {

$("#send_content").val($("#send_content").val()+decode($(s).html()));

}

3、jsp页面编写

                <ul class="no_ul posiemo clearfix">

                   

                    <li><input class="submitB" type="button" id="commentAttachment" name="urlfile" type="file" value='图片'></li>

                     <li class="emotion " onclick = renderEmoji() >表情</li>

                    <div id="ad" class='abemo'></div>

                </ul>

注意：表情弹框显示的位置需自己的前端进行调整；

现在你可以在web端发送表情和接收表情了！

转载于:https://my.oschina.net/u/2376861/blog/425919