1. HTML页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件
   

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="jquery.qqFace.js"></script>

2.body中需要有文件框和<span class="emotion">表情</span>这句如下例子

<div class="comment-box">
    <textarea placeholder="您的评论可以一针见血" name="comment" id="comment-textarea" cols="100%" rows="3" tabindex="1"></textarea>
    <div class="comment-ctrl"> <span class="emotion"><img src="__STATIC__/index/images/face/5.png" width="20" height="20" alt="" />表情</span>
        <div class="comment-prompt"> <i class="fa fa-spin fa-circle-o-notch"></i> <span class="comment-prompt-text"></span> </div>
        <button type="submit" name="comment-submit" id="comment-submit" tabindex="5" articleid="{$article.id}">评论</button>
    </div>
</div>

3.CSS调整.根据自己情况调整.主要是.qqFace

.comment-signarea{background-color:#f6f6f6;border-radius:7px;padding:30px 20px;text-align:center;margin-bottom:20px}
.comment-signarea h3{margin:0;padding:0;margin-bottom:15px;font-weight:normal;font-size:18px;cursor:pointer}
#respond .comment{position:relative;padding-left:46px}
.comment-title{font-size:12px;color:#999;float:left;margin-left:-46px;width:36px;text-align:center}
.comment-title .avatar{height:36px;width:36px;border-radius:50%;margin-bottom:5px}
.comment-title img:hover{cursor:pointer;-moz-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;transition:all .8s ease-in-out;-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
.comment-box{border:2px solid #ccd4d9;border-radius:2px;padding:4px 4px 0;background-color:#FFF;position:relative;z-index:10}
#comment-textarea{width:100%;resize:none;overflow-x:hidden;overflow-y:auto;border:0;line-height:22px;font-size:14px;outline:0;color:#666;height:68px}
#comment-textarea::-webkit-scrollbar{width:3px;height:3px;background:#CCC;border-radius:5px}
#comment-textarea::-webkit-scrollbar-button{display:none}
#comment-textarea::-webkit-scrollbar-track-piece{display:none}
#comment-textarea::-webkit-scrollbar-thumb{background:#999;border-radius:5px}
#comment-textarea::-webkit-scrollbar-thumb:hover{background:#39c}
.comment-ctrl{background-color:#fbfbfb;height:36px;margin-left:-4px;border-top:solid 1px #f2f2f2;z-index:5}
.comment-box span.emotion{color:#666;position:absolute;left:-2px;bottom:-2px;height:38px;line-height:38px;padding:0 10px;cursor:pointer}
.comment-box span.emotion:hover{color:#39c;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36)}
.qqFace{margin-top:4px;background:#FFF;padding:2px;border-radius:5px;-moz-box-shadow:0 0 6px rgba(51,153,204,.3);-webkit-box-shadow:0 0 6px rgba(51,153,204,.3);box-shadow:0 0 6px rgba(51,153,204,.3)}
.qqFace table td{padding:0}
.qqFace table td img{cursor:pointer}
.qqFace table td img:hover{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);-moz-box-shadow:0 0 5px rgba(51,153,204,.9);-webkit-box-shadow:0 0 5px rgba(51,153,204,.9);box-shadow:0 0 5px rgba(51,153,204,.9)}
#comment-submit{position:absolute;right:-2px;bottom:-2px;background:#39c;border:0;border:2px solid;border-color:#39c;border-left:none;border-top:0;padding:0;width:100px;height:38px;color:#FFF;outline:0;border-radius:0 0 2px 0;font-size:16px;z-index:6}
#comment-submit:hover{background:#fbfbfb;border-color:#ccd4d9;color:#39c;border-top:solid 1px #f2f2f2}
.comment-prompt{cursor:pointer;display:none;text-align:center;font-size:14px;line-height:38px;color:#39c}
.comment-prompt:hover{color:#f46d6d}

4.在调用的当前页面加上如下函数

$(function() {
    $('.emotion').qqFace({
        id: 'facebox',
        assign: 'comment-textarea',
        path: '__STATIC__/index/images/arclist/' //表情存放的路径
    });
});

现在就可以发表情了.点击小表情发布出去的是类似[em_5]之类的代码,我们保存数据库时,应该把该代码替换成实际的图片.这样发布后才能正常的显示出来.

在我们存入数据库时,使用下面的函数进行替换.

function replace_em(str){
    str = str.replace(/\</g,'&lt;');
    str = str.replace(/\>/g,'&gt;');
    str = str.replace(/\[em_([0-9]*)\]/g,'<img src="/static/index/images/arclist/$1.gif" border="0" />');
    return str;
}