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='' onclick='sel(this)' >";
} else {
html += '<li onclick="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端发送表情和接收表情了！