为多说评论添加QQ表情

 

首先写这篇文章前感谢 @蔡锶铎 所提供的思路

昨天写了几个小时，终于把整个QQ表情包写好了，好多的佯~

 

准备：

本地化多说核心脚本文件embed.js

1、下载 embed.js 脚本文件 链接：http://static.duoshuo.com/embed.js （复制内容到记事本保存为embed.js即可）

2、上传 脚本文件 到你的空间

3、在 多说代码 所在位置查找并修改核心脚本的链接（wordpress中这些代码在插件目录中的Wordpress.php中）

<script type="text/javascript">
var duoshuoQuery = <?php echo json_encode($this->buildQuery());?>;
duoshuoQuery.sso.login += '&redirect_to=' + encodeURIComponent(window.location.href);
duoshuoQuery.sso.logout += '&redirect_to=' + encodeURIComponent(window.location.href);
(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';
    ds.async = true;
    ds.charset = 'UTF-8';
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.domain.com/这里改成你的核心脚本所在链接';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>

4、在任意带有多说评论框的页面点击鼠标右键查看源代码-搜索 embed.js ，如果多说脚本链接是你已上传的脚本文件，恭喜你多说核心脚本本地化成功！

 

下载_QQ表情包_：请移步 https://github.com/im0qianqian/QQ-Emoticon

 

 

开始：

1、在多说 embed.js 中搜索  return w.toggleClass("ds-expanded").hasClass("ds-expanded") 这部分

2、然后在 s.render(), 与 S.require("smilies", function() 之间添加

DUOSHUO.addSmilies("QQ2016",{
"$[:微笑:]":"微笑","$[:撇嘴:]":"撇嘴","$[:色:]":"色","$[:发呆:]":"发呆","$[:得意:]":"得意","$[:流泪:]":"流泪","$[:害羞:]":"害羞","$[:闭嘴:]":"闭嘴","$[:睡:]":"睡","$[:大哭:]":"大哭","$[:尴尬:]":"尴尬","$[:发怒:]":"发怒","$[:调皮:]":"调皮","$[:惊讶:]":"惊讶","$[:难过:]":"难过","$[:酷:]":"酷","$[:冷汗:]":"冷汗","$[:抓狂:]":"抓狂","$[:吐:]":"吐","$[:偷笑:]":"偷笑","$[:可爱:]":"可爱","$[:白眼:]":"白眼","$[:傲慢:]":"傲慢","$[:饥饿:]":"饥饿","$[:困:]":"困","$[:惊恐:]":"惊恐","$[:流汗:]":"流汗","$[:憨笑:]":"憨笑","$[:大兵:]":"大兵","$[:奋斗:]":"奋斗","$[:咒骂:]":"咒骂","$[:疑问:]":"疑问","$[:嘘:]":"嘘","$[:晕:]":"晕","$[:折磨:]":"折磨","$[:衰:]":"衰","$[:骷髅:]":"骷髅","$[:敲打:]":"敲打","$[:再见:]":"再见","$[:擦汗:]":"擦汗","$[:抠鼻:]":"抠鼻","$[:鼓掌:]":"鼓掌","$[:嗅大了:]":"嗅大了","$[:坏笑:]":"坏笑","$[:左哼哼:]":"左哼哼","$[:右哼哼:]":"右哼哼","$[:哈欠:]":"哈欠","$[:鄙视:]":"鄙视","$[:委屈:]":"委屈","$[:可怜:]":"可怜","$[:阴险:]":"阴险","$[:亲亲:]":"亲亲","$[:吓:]":"吓","$[:快哭了:]":"快哭了","$[:菜刀:]":"菜刀","$[:西瓜:]":"西瓜","$[:啤酒:]":"啤酒","$[:篮球:]":"篮球","$[:乒乓:]":"乒乓","$[:咖啡:]":"咖啡","$[:饭:]":"饭","$[:猪头:]":"猪头","$[:玫瑰:]":"玫瑰","$[:凋谢:]":"凋谢","$[:心:]":"心","$[:心碎:]":"心碎","$[:蛋糕:]":"蛋糕","$[:闪电:]":"闪电","$[:炸弹:]":"炸弹","$[:刀:]":"刀","$[:足球:]":"足球","$[:瓢虫:]":"瓢虫","$[:便便:]":"便便","$[:夜晚:]":"夜晚","$[:太阳:]":"太阳","$[:礼物:]":"礼物","$[:拥抱:]":"拥抱","$[:强:]":"强","$[:弱:]":"弱","$[:握手:]":"握手","$[:胜利:]":"胜利","$[:抱拳:]":"抱拳","$[:勾引:]":"勾引","$[:拳头:]":"拳头","$[:差劲:]":"差劲","$[:爱你:]":"爱你","$[:NO:]":"NO","$[:OK:]":"OK","$[:爱情:]":"爱情","$[:飞吻:]":"飞吻","$[:发财:]":"发财","$[:帅:]":"帅","$[:雨伞:]":"雨伞","$[:高铁左车头:]":"高铁左车头","$[:车厢:]":"车厢","$[:高铁右车头:]":"高铁右车头","$[:纸巾:]":"纸巾","$[:右太极:]":"右太极","$[:左太极:]":"左太极","$[:献吻:]":"献吻","$[:街舞:]":"街舞","$[:激动:]":"激动","$[:挥动:]":"挥动","$[:跳绳:]":"跳绳","$[:回头:]":"回头","$[:磕头:]":"磕头","$[:转圈:]":"转圈","$[:怄火:]":"怄火","$[:发抖:]":"发抖","$[:跳跳:]":"跳跳","$[:爆筋:]":"爆筋","$[:沙发:]":"沙发","$[:钞票:]":"钞票","$[:蜡烛:]":"蜡烛","$[:手枪:]":"手枪","$[:灯:]":"灯","$[:香蕉:]":"香蕉","$[:吻:]":"吻","$[:下雨:]":"下雨","$[:闹钟:]":"闹钟","$[:囍:]":"囍","$[:棒棒糖:]":"棒棒糖","$[:面条:]":"面条","$[:车:]":"车","$[:邮件:]":"邮件","$[:风车:]":"风车","$[:药丸:]":"药丸","$[:奶瓶:]":"奶瓶","$[:灯笼:]":"灯笼","$[:青蛙:]":"青蛙","$[:戒指:]":"戒指","$[:K歌:]":"K歌","$[:熊猫:]":"熊猫","$[:喝彩:]":"喝彩","$[:购物:]":"购物","$[:多云:]":"多云","$[:鞭炮:]":"鞭炮","$[:飞机:]":"飞机","$[:气球:]":"气球"
}),

表情有点多佯~

 

注意：为什么对每一个表情的 标志 弄成 $[:微笑:] 这种类型，这个嘛！

如果你的多说评论不会写入本地数据库的话请忽略这些。

多说的默认表情的标志一般都是 [微笑] 这种类型，如果我们把表情标志定义成 $[微笑] 这样，在多说pull到本地的过程中会将评论框中的内容根据原先定义进行转换，也就是说如果你不修改这些定义的话写入数据库的内容便是

$<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/05/weixiao_org.gif"/>

很明显可以看出来，多说写入的内容是一个图片标签，况且最重要的是这个图片并不是我们新加入的QQ表情，怎么解决这些问题呢？待会儿说吧！

 

3、搜索 S.require("smilies" 它后面写的 s.reset("微博-默认") 这个是默认显示的表情，可以修改成 QQ2016 这样点击表情的时候就会默认显示QQ表情啦~

 

4、搜索 http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/
修改整个 function 为

function t(t, s) {
	var i = 0 === e.indexOf("微博") ? "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/" + s.replace("_org", "_thumb") : S.STATIC_URL + "/images/smilies/" + s;
	if (0 === e.indexOf("QQ2016")) {
		i = "这里是你的QQ表情包所上传的目录 如：http://www.domain.cn/qq/" + s + ".gif";
	}
        "WordPress" === e && (t = " " + t + " "),
        a +='<li><img src="' + i + '" title="' + _(t) + '" width="22" height="22"/></li>'
}

 

5、在你的多说CSS中添加

img.biaoqing, #ds-thread #ds-reset .ds-comment-body img.biaoqing {
    display: inline;
    margin: 0;
}
img.paopao, #ds-thread #ds-reset .ds-comment-body img.qq{
    margin-bottom: -5px;
    height: 32px;
    width: 32px;
    max-width: 32px;
}

 

6、搜索 et.post = function(e) 然后

et.post = function(e) {
        var t = "",
        s = e.post,
        i = e.options,
        r = s.author;

        /******* 这里是添加的一部分*********/
        var matchedq;
	while(matchedq=s.message.match(/\$\s*<img[^\>]*?title=\"\[\s*:(微笑|撇嘴|色|发呆|得意|流泪|害羞|闭嘴|睡|大哭|尴尬|发怒|调皮|惊讶|难过|酷|冷汗|抓狂|吐|偷笑|可爱|白眼|傲慢|饥饿|困|惊恐|流汗|憨笑|大兵|奋斗|咒骂|疑问|嘘|晕|折磨|衰|骷髅|敲打|再见|擦汗|抠鼻|鼓掌|嗅大了|坏笑|左哼哼|右哼哼|哈欠|鄙视|委屈|可怜|阴险|亲亲|吓|快哭了|菜刀|西瓜|啤酒|篮球|乒乓|咖啡|饭|猪头|玫瑰|凋谢|心|心碎|蛋糕|闪电|炸弹|刀|足球|瓢虫|便便|夜晚|太阳|礼物|拥抱|强|弱|握手|胜利|抱拳|勾引|拳头|差劲|爱你|NO|OK|爱情|飞吻|发财|帅|雨伞|高铁左车头|车厢|高铁右车头|纸巾|右太极|左太极|献吻|街舞|激动|挥动|跳绳|回头|磕头|转圈|怄火|发抖|跳跳|爆筋|沙发|钞票|蜡烛|手枪|灯|香蕉|吻|下雨|闹钟|囍|棒棒糖|面条|车|邮件|风车|药丸|奶瓶|灯笼|青蛙|戒指|K歌|熊猫|喝彩|购物|多云|鞭炮|飞机|气球):\s*\]\"[^\>]*?class=\"ds\-smiley\"[^\>]*?>/)) {
	s.message = s.message.replace(matchedq[0], "<img src=\"这里是你的QQ表情包所上传的目录 如：http://www.domain.cn/qq/" + matchedq[1].trim() + ".gif\" class=\"biaoqing qq\" height=22 width=22 no-zoom />");
	}
	while(matchedq=s.message.match(/\$\[\s*:(微笑|撇嘴|色|发呆|得意|流泪|害羞|闭嘴|睡|大哭|尴尬|发怒|调皮|惊讶|难过|酷|冷汗|抓狂|吐|偷笑|可爱|白眼|傲慢|饥饿|困|惊恐|流汗|憨笑|大兵|奋斗|咒骂|疑问|嘘|晕|折磨|衰|骷髅|敲打|再见|擦汗|抠鼻|鼓掌|嗅大了|坏笑|左哼哼|右哼哼|哈欠|鄙视|委屈|可怜|阴险|亲亲|吓|快哭了|菜刀|西瓜|啤酒|篮球|乒乓|咖啡|饭|猪头|玫瑰|凋谢|心|心碎|蛋糕|闪电|炸弹|刀|足球|瓢虫|便便|夜晚|太阳|礼物|拥抱|强|弱|握手|胜利|抱拳|勾引|拳头|差劲|爱你|NO|OK|爱情|飞吻|发财|帅|雨伞|高铁左车头|车厢|高铁右车头|纸巾|右太极|左太极|献吻|街舞|激动|挥动|跳绳|回头|磕头|转圈|怄火|发抖|跳跳|爆筋|沙发|钞票|蜡烛|手枪|灯|香蕉|吻|下雨|闹钟|囍|棒棒糖|面条|车|邮件|风车|药丸|奶瓶|灯笼|青蛙|戒指|K歌|熊猫|喝彩|购物|多云|鞭炮|飞机|气球):\s*\]/)) {
	s.message = s.message.replace(matchedq[0], "<img src=\"这里是你的QQ表情包所上传的目录 如：http://www.domain.cn/qq/" + matchedq[1] + ".gif\" class=\"biaoqing qq\" height=22 width=22 no-zoom />");
	}
	/***************************/
	
    if (s.message.indexOf("http:") != -1) {

 

　　好啦，完成了这些，就可以正常使用QQ新版的表情包啦！快去看看吧！整个过程在 embed.js 中修改 三 处的代码，多说CSS 中添加一段代码。

 

---

 

　　那么，接下来继续 多说写入数据库 的问题吧！
 
　　根据我所发现的，如果评论中含有多说默认表情的标志，比如 [微笑] 然后多说会首先将消息经过转义，变成

<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/05/weixiao_org.gif"/>

 
　　同时存储在 多说的服务器 ，在 pull到本地 的时候便会把这样的一个 图片标签 写入 本地数据库，而在显示评论内容，也就是 多说调取评论内容 时，它不会再从你的 本地数据库 中获取数据，而是从 多说的服务器 调取数据，此时便直接把这个表情的图片标签输出给你。
 
　　如果我们添加 QQ表情 之后，它仅仅所能改变的只是多说调取评论信息之后的处理，把评论中的 $[:微笑:] 替换成相应的图片标签输出给我们。

 
 

举个栗子、、

　　已添加 QQ表情 的情况下 – 评论内容 [微笑] $[:微笑:]

 

本地数据库

<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/05/weixiao_org.gif"/> $[:微笑:]

 

多说服务器

<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/05/weixiao_org.gif"/> $[:微笑:]

 

我们所看到的

<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/05/weixiao_org.gif"/> <img src="http://www.domain.cn/qq/微笑.gif"/>

 

　　唔~ 它到底是怎样写入多说服务器的呢？我应该怎么在中途修改这些数据呢？至今为止还是没有找到哎！ (；′⌒`)
 
　　如果有小伙伴们发现了一定要告诉我呀！

 

我虽然改不了 写入多说服务器 的数据，但是我可以 修改pull到本地的数据 呀！

 

以 wordpress 为例，在多说插件的目录下有一个 wordpress.php 文件

 

打开它，然后搜索 trim(strip_tags($post['author_name'])), 操作如下

if (!is_numeric($post_id))	//	找不到对应的文章
	return array();

/*************这里是添加的部分***************/
$post['message'] = preg_replace('/\$\[\s*:(微笑|撇嘴|色|发呆|得意|流泪|害羞|闭嘴|睡|大哭|尴尬|发怒|调皮|惊讶|难过|酷|冷汗|抓狂|吐|偷笑|可爱|白眼|傲慢|饥饿|困|惊恐|流汗|憨笑|大兵|奋斗|咒骂|疑问|嘘|晕|折磨|衰|骷髅|敲打|再见|擦汗|抠鼻|鼓掌|嗅大了|坏笑|左哼哼|右哼哼|哈欠|鄙视|委屈|可怜|阴险|亲亲|吓|快哭了|菜刀|西瓜|啤酒|篮球|乒乓|咖啡|饭|猪头|玫瑰|凋谢|心|心碎|蛋糕|闪电|炸弹|刀|足球|瓢虫|便便|夜晚|太阳|礼物|拥抱|强|弱|握手|胜利|抱拳|勾引|拳头|差劲|爱你|NO|OK|爱情|飞吻|发财|帅|雨伞|高铁左车头|车厢|高铁右车头|纸巾|右太极|左太极|献吻|街舞|激动|挥动|跳绳|回头|磕头|转圈|怄火|发抖|跳跳|爆筋|沙发|钞票|蜡烛|手枪|灯|香蕉|吻|下雨|闹钟|囍|棒棒糖|面条|车|邮件|风车|药丸|奶瓶|灯笼|青蛙|戒指|K歌|熊猫|喝彩|购物|多云|鞭炮|飞机|气球):\s*\]/' , '<img src="http://www.domain.cn/qq/$1.gif"/>',$post['message']);
/********************************************/
	
	$data = array(
		'comment_author'=>trim(strip_tags($post['author_name'])),

这里我们所操作的对象 $post['message'] 也就是评论内容啦~
 
当然你也可以对它进行其他操作，哈哈，首先利用 正则表达式 匹配到评论中的 表情标志 ，然后替换成相应的 图片标签 ，OK……

 

完成了这些，那就还是那个栗子咯

　　已添加 QQ表情 并且 修改写入数据库 的情况下 – 评论内容 [微笑] $[:微笑:]

 

本地数据库

<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/05/weixiao_org.gif"/> <img src="http://www.domain.cn/qq/微笑.gif"/>

 

多说服务器

<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/05/weixiao_org.gif"/> $[:微笑:]

 

我们所看到的

<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/05/weixiao_org.gif"/> <img src="http://www.domain.cn/qq/微笑.gif"/>

 

---

 
　　我好像又想到了一个奇怪的事情，要是表情标志是 $[微笑]

　　在多说服务器上应该带有一个图片标签，那从多说获取评论数据的时候又是怎么变成正常我们所设定的表情的呢？

　　哎呀！好复杂的关系呀！不想了，也不试了，这篇文章写了整整一个下午了，233
 
假装上面我所理解的都没有错误。 $[:害羞:]