顯示效果圖
Paste_Image.png
1. 下載 jQuery QQ表情插件 jquery.qqFace.js
下載鏈接 http://www.jq22.com/jquery-info365
下載文件中加入了jquery-browser.js犀概，低于jquery 1.9.0版本的可以不調(diào)用
將表情包放在 public/images 中
2. 使用方法
HTML
首先在html頁(yè)面的head中引入jQuery庫(kù)文件和QQ表情插件jquery.qqFace.js文件炒刁。
<script type="text/javascript" src="jquery.min.js">
</script> <script type="text/javascript" src="jquery.qqFace.js"></script>
<!--qq表情-->
<div class="emotion"></div>
<form action="">
<div class="send-bd">
<textarea class="textarea" id="msg" name="msg" required></textarea>
<button type="submit" class="btn btn-primary pull-right" id="sendBtn">發(fā)送</button>
</div>
</form>
JS
點(diǎn)擊頁(yè)面輸入框下方那個(gè)笑臉時(shí)，觸發(fā)調(diào)用qqface表情插件
// qq表情
$('#emotion').qqFace({ //表情轉(zhuǎn)換
id: 'facebox', //表情盒子的ID
assign: 'msg', //給那個(gè)id為msg的控件賦值
path: 'images/face/' //表情存放的路徑
});
當(dāng)選擇表情圖片后葛碧，輸入框中會(huì)插入一段如[em_5]之類(lèi)的代碼舔示，代表插入的表情圖片碟婆，實(shí)際應(yīng)用中，點(diǎn)提交按鈕后應(yīng)該將這段表情代碼連同其他內(nèi)容發(fā)送給對(duì)方并保存到數(shù)據(jù)庫(kù)中惕稻。而在頁(yè)面顯示的時(shí)候竖共，我們應(yīng)該將表情代碼替換成真正的圖片顯示在頁(yè)面上
// 匹配表情字符
function replace_em(str) {
str = str.replace(/\</g, '<');
str = str.replace(/\>/g, '>');
str = str.replace(/\n/g, '<br/>');
str = str.replace(/\[em_([0-9]*)\]/g, '<img src="images/face/$1.gif" border="0" />');
return str;
}
在發(fā)送給對(duì)方時(shí)直接emit帶表情代碼的消息，保存到數(shù)據(jù)庫(kù)也是：
socket.emit('chat message', msg);
doAddMsg(0, data.ctn, data.from, data.to);
客戶(hù)端接收到消息以及顯示離線消息俺祠、取出聊天消息時(shí)匹配表情字符：
var html = $.format(FROM_MSG, replace_em(data.msg));
