OwO表情二改&编辑器工具栏表情
0
2006
2017年10月12日
好久没有管理优化我的博客了，我这人，一不折腾就是咸鱼，一折腾就像吃了炫迈。之前⑨BIE老说打开我博客电脑要咆哮
。本想直接换个主题的，还是算了，懒得重新改。于是我找原因，WP本身就繁重。我测试了一下，打开我的首页，php执行时间为0.8s，蛤？蛤！蛤！
原因就是Crayon Syntax Highlighter这款代码高亮插件。之前我在查看网页源代码的时候就发现，它会把要高亮的代码直接转成html语言。
别说你咋辣么zz，不用highlight.js。因为我以前站点的情况，用起来都差不多，而且Crayon Syntax Highlighter有很多功能。
我这么一关啊，php执行时间从0.8s变成了0.14s，MMP
为了提高用户体验，我到泽泽的博客去看了一下 ，也许我早该用pjax了， 
咸鱼啊。刚优化了执行时长，也为我全站pjax提供了基础 
。
在修改中我遇到了一个问题，也许只有我遇到吧。开始有pjax加载的趋势，然后完全刷新。怀疑人生 
？？？
这种时候，当然是RTFM啦。原因：超时重定向行为
渣渣主机，禁用
$(document).on('pjax:timeout', function(event) {
// Prevent default timeout redirection behavior
event.preventDefault()
})
我并没有配合instantclick使用，因为我这会请求过多出现错误，影响浏览统计等等问题。
用酷容和蓝大人体验了一下修改效果，，美滋滋
从最开始我的博客就不怎么支持IE，IE简直。。。当然是原谅它啊
。已对IE访问进行美化，能看能用了。
移动端我也进行了一些细节优化，体验比以前更好。
alu表情不能用了（不改了），还是用DIYgay的OwO表情。我发现泽泽的，和之前多说的一样，点击表情输入的是对应文字。啊~我也要换。于是对OwO进行了二改，自己动手，丰衣足食。我的想法是，使用文字代替表情，但是在读取的时候，对于文字替换成表情图片。
以下是我对OwO.min.js进行的修改。我有颜文字、阿鲁和泡泡表情，有文字重复的，于是我用@()和@[]进行区别，以下适合本站，其他酌情修改。
"use strict";
function _classCallCheck(e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
}
var _createClass = function() {
function e(e, t) {
for (var a = 0; a < t.length; a++) {
var s = t[a];
s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0),
Object.defineProperty(e, s.key, s);
}
}
return function(t, a, s) {
return a && e(t.prototype, a), s && e(t, s), t;
};
}();
!function() {
var e = function() {
function e(t) {
var a = this;
_classCallCheck(this, e);
var s = {
logo:"OwO表情",
container:document.getElementsByClassName("OwO")[0],
target:document.getElementsByTagName("textarea")[0],
position:"down",
width:"100%",
maxHeight:"250px",
api:"https://api.anotherhome.net/OwO/OwO.json"
};
for (var n in s) s.hasOwnProperty(n) && !t.hasOwnProperty(n) && (t[n] = s[n]);
this.container = t.container, this.target = t.target, "up" === t.position && this.container.classList.add("OwO-up");
var i = new XMLHttpRequest();
i.onreadystatechange = function() {
4 === i.readyState && (i.status >= 200 && i.status < 300 || 304 === i.status ? (a.odata = JSON.parse(i.responseText),
a.init(t)) :console.log("OwO data request was unsuccessful: " + i.status));
}, i.open("get", t.api, !0), i.send(null);
}
return _createClass(e, [ {
key:"init",
value:function(e) {
var t = this;
this.area = e.target, this.packages = Object.keys(this.odata);
for (var a = '\n <div class="OwO-logo"><span>' + e.logo + '</span></div>\n <div class="OwO-body" style="width: ' + e.width + '">', s = 0; s < this.packages.length; s++) {
//此处开始，也可以根据类型(this.odata[this.packages[s]].type)来判断文字和图片
if(s==0){
//颜文字
a += '\n <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n <li class="OwO-item" title="' + n[i].text + '" data-OwO=\'' + n[i].icon + '\'>' + n[i].icon + "</li>";
a += "\n </ul>";
}
else if(s==1){
//阿鲁
a += '\n <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n <li class="OwO-item" title="' + n[i].text + '" data-OwO="@(' + n[i].text + ')">' + n[i].icon + "</li>";
a += "\n </ul>";
}
else {
//泡泡
a += '\n <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n <li class="OwO-item" title="' + n[i].text + '" data-OwO="@[' + n[i].text + ']">' + n[i].icon + "</li>";
a += "\n </ul>";
}
//此处结束
}
a += '\n <div class="OwO-bar">\n <ul class="OwO-packages">';
for (var o = 0; o < this.packages.length; o++) a += "\n <li><span>" + this.packages[o] + "</span></li>";
a += "\n </ul>\n </div>\n </div>\n ",
this.container.innerHTML = a, this.logo = this.container.getElementsByClassName("OwO-logo")[0],
this.logo.addEventListener("click", function() {
t.toggle();
}), this.container.getElementsByClassName("OwO-body")[0].addEventListener("click", function(e) {
var a = null;
if (e.target.classList.contains("OwO-item") ? a = e.target :e.target.parentNode.classList.contains("OwO-item") && (a = e.target.parentNode),
a) {
var s = t.area.selectionEnd, n = t.area.value;
//原a.innerHTML读取OwO-item里的html内容，修改为读取data-OwO属性值
t.area.value = n.slice(0, s) + a.getAttribute("data-OwO") + n.slice(s), t.area.focus(),
t.toggle();
}
}), this.packagesEle = this.container.getElementsByClassName("OwO-packages")[0];
for (var c = function(e) {
!function(a) {
t.packagesEle.children[e].addEventListener("click", function() {
t.tab(a);
});
}(e);
}, l = 0; l < this.packagesEle.children.length; l++) c(l);
this.tab(0);
}
}, {
key:"toggle",
value:function() {
this.container.classList.contains("OwO-open") ? this.container.classList.remove("OwO-open") :this.container.classList.add("OwO-open");
}
}, {
key:"tab",
value:function(e) {
var t = this.container.getElementsByClassName("OwO-items-show")[0];
t && t.classList.remove("OwO-items-show"), this.container.getElementsByClassName("OwO-items")[e].classList.add("OwO-items-show");
var a = this.container.getElementsByClassName("OwO-package-active")[0];
a && a.classList.remove("OwO-package-active"), this.packagesEle.getElementsByTagName("li")[e].classList.add("OwO-package-active");
}
} ]), e;
}();
"undefined" != typeof module && "undefined" != typeof module.exports ? module.exports = e :window.OwO = e;
}();
//# sourceMappingURL=OwO.min.js.map
然后在function.php里添加代码（顺便加@评论者，表情和@都不写入数据库）
<?php
/**
*添加@评论者及替换OwO表情
*by 兰陵
*https://blog.thkira.com/
*/
function comment_add_owo($comment_text, $comment = '') {
if($comment->comment_parent > 0) {
$comment_text = '<a href="#comment-' . $comment->comment_parent . '" title="' .get_comment_author( $comment->comment_parent ) . '" style="color:#3f51b5;">@' .get_comment_author( $comment->comment_parent ) . '</a> ' . $comment_text;
}
$data_OwO = array(
'@(暗地观察)' => '<img src="/OwO/alu/暗地观察.png" alt="暗地观察" style="vertical-align: middle;">',
'@(便便)' => '<img src="/OwO/alu/便便.png" alt="便便" style="vertical-align: middle;">',
'@(不出所料)' => '<img src="/OwO/alu/不出所料.png" alt="不出所料" style="vertical-align: middle;">',
'@(不高兴)' => '<img src="/OwO/alu/不高兴.png" alt="不高兴" style="vertical-align: middle;">',
'@(不说话)' => '<img src="/OwO/alu/不说话.png" alt="不说话" style="vertical-align: middle;">',
'@(抽烟)' => '<img src="/OwO/alu/抽烟.png" alt="抽烟" style="vertical-align: middle;">',
'@(呲牙)' => '<img src="/OwO/alu/呲牙.png" alt="呲牙" style="vertical-align: middle;">',
'@(大囧)' => '<img src="/OwO/alu/大囧.png" alt="大囧" style="vertical-align: middle;">',
'@(得意)' => '<img src="/OwO/alu/得意.png" alt="得意" style="vertical-align: middle;">',
'@(愤怒)' => '<img src="/OwO/alu/愤怒.png" alt="愤怒" style="vertical-align: middle;">',
'@(尴尬)' => '<img src="/OwO/alu/尴尬.png" alt="尴尬" style="vertical-align: middle;">',
'@(高兴)' => '<img src="/OwO/alu/高兴.png" alt="高兴" style="vertical-align: middle;">',
'@(鼓掌)' => '<img src="/OwO/alu/鼓掌.png" alt="鼓掌" style="vertical-align: middle;">',
'@(观察)' => '<img src="/OwO/alu/观察.png" alt="观察" style="vertical-align: middle;">',
'@(害羞)' => '<img src="/OwO/alu/害羞.png" alt="害羞" style="vertical-align: middle;">',
'@(汗)' => '<img src="/OwO/alu/汗.png" alt="汗" style="vertical-align: middle;">',
'@(黑线)' => '<img src="/OwO/alu/黑线.png" alt="黑线" style="vertical-align: middle;">',
'@(欢呼)' => '<img src="/OwO/alu/欢呼.png" alt="欢呼" style="vertical-align: middle;">',
'@(击掌)' => '<img src="/OwO/alu/击掌.png" alt="击掌" style="vertical-align: middle;">',
'@(惊喜)' => '<img src="/OwO/alu/惊喜.png" alt="惊喜" style="vertical-align: middle;">',
'@(看不见)' => '<img src="/OwO/alu/看不见.png" alt="看不见" style="vertical-align: middle;">',
'@(看热闹)' => '<img src="/OwO/alu/看热闹.png" alt="看热闹" style="vertical-align: middle;">',
'@(抠鼻)' => '<img src="/OwO/alu/抠鼻.png" alt="抠鼻" style="vertical-align: middle;">',
'@(口水)' => '<img src="/OwO/alu/口水.png" alt="口水" style="vertical-align: middle;">',
'@(哭泣)' => '<img src="/OwO/alu/哭泣.png" alt="哭泣" style="vertical-align: middle;">',
'@(狂汗)' => '<img src="/OwO/alu/狂汗.png" alt="狂汗" style="vertical-align: middle;">',
'@(蜡烛)' => '<img src="/OwO/alu/蜡烛.png" alt="蜡烛" style="vertical-align: middle;">',
'@(脸红)' => '<img src="/OwO/alu/脸红.png" alt="脸红" style="vertical-align: middle;">',
'@(内伤)' => '<img src="/OwO/alu/内伤.png" alt="内伤" style="vertical-align: middle;">',
'@(喷水)' => '<img src="/OwO/alu/喷水.png" alt="喷水" style="vertical-align: middle;">',
'@(喷血)' => '<img src="/OwO/alu/喷血.png" alt="喷血" style="vertical-align: middle;">',
'@(期待)' => '<img src="/OwO/alu/期待.png" alt="期待" style="vertical-align: middle;">',
'@(亲亲)' => '<img src="/OwO/alu/亲亲.png" alt="亲亲" style="vertical-align: middle;">',
'@(傻笑)' => '<img src="/OwO/alu/傻笑.png" alt="傻笑" style="vertical-align: middle;">',
'@(扇耳光)' => '<img src="/OwO/alu/扇耳光.png" alt="扇耳光" style="vertical-align: middle;">',
'@(深思)' => '<img src="/OwO/alu/深思.png" alt="深思" style="vertical-align: middle;">',
'@(锁眉)' => '<img src="/OwO/alu/锁眉.png" alt="锁眉" style="vertical-align: middle;">',
'@(投降)' => '<img src="/OwO/alu/投降.png" alt="投降" style="vertical-align: middle;">',
'@(吐)' => '<img src="/OwO/alu/吐.png" alt="吐" style="vertical-align: middle;">',
'@(吐舌)' => '<img src="/OwO/alu/吐舌.png" alt="吐舌" style="vertical-align: middle;">',
'@(吐血倒地)' => '<img src="/OwO/alu/吐血倒地.png" alt="吐血倒地" style="vertical-align: middle;">',
'@(无奈)' => '<img src="/OwO/alu/无奈.png" alt="无奈" style="vertical-align: middle;">',
'@(无所谓)' => '<img src="/OwO/alu/无所谓.png" alt="无所谓" style="vertical-align: middle;">',
'@(无语)' => '<img src="/OwO/alu/无语.png" alt="无语" style="vertical-align: middle;">',
'@(喜极而泣)' => '<img src="/OwO/alu/喜极而泣.png" alt="喜极而泣" style="vertical-align: middle;">',
'@(献花)' => '<img src="/OwO/alu/献花.png" alt="献花" style="vertical-align: middle;">',
'@(献黄瓜)' => '<img src="/OwO/alu/献黄瓜.png" alt="献黄瓜" style="vertical-align: middle;">',
'@(想一想)' => '<img src="/OwO/alu/想一想.png" alt="想一想" style="vertical-align: middle;">',
'@(小怒)' => '<img src="/OwO/alu/小怒.png" alt="小怒" style="vertical-align: middle;">',
'@(小眼睛)' => '<img src="/OwO/alu/小眼睛.png" alt="小眼睛" style="vertical-align: middle;">',
'@(邪恶)' => '<img src="/OwO/alu/邪恶.png" alt="邪恶" style="vertical-align: middle;">',
'@(咽气)' => '<img src="/OwO/alu/咽气.png" alt="咽气" style="vertical-align: middle;">',
'@(阴暗)' => '<img src="/OwO/alu/阴暗.png" alt="阴暗" style="vertical-align: middle;">',
'@(赞一个)' => '<img src="/OwO/alu/赞一个.png" alt="赞一个" style="vertical-align: middle;">',
'@(长草)' => '<img src="/OwO/alu/长草.png" alt="长草" style="vertical-align: middle;">',
'@(中刀)' => '<img src="/OwO/alu/中刀.png" alt="中刀" style="vertical-align: middle;">',
'@(中枪)' => '<img src="/OwO/alu/中枪.png" alt="中枪" style="vertical-align: middle;">',
'@(中指)' => '<img src="/OwO/alu/中指.png" alt="中指" style="vertical-align: middle;">',
'@(肿包)' => '<img src="/OwO/alu/肿包.png" alt="肿包" style="vertical-align: middle;">',
'@(皱眉)' => '<img src="/OwO/alu/皱眉.png" alt="皱眉" style="vertical-align: middle;">',
'@(装大款)' => '<img src="/OwO/alu/装大款.png" alt="装大款" style="vertical-align: middle;">',
'@(坐等)' => '<img src="/OwO/alu/坐等.png" alt="坐等" style="vertical-align: middle;">',
'@[啊]' => '<img src="/OwO/paopao/啊.png" alt="啊" style="vertical-align: middle;">',
'@[爱心]' => '<img src="/OwO/paopao/爱心.png" alt="爱心" style="vertical-align: middle;">',
'@[鄙视]' => '<img src="/OwO/paopao/鄙视.png" alt="鄙视" style="vertical-align: middle;">',
'@[便便]' => '<img src="/OwO/paopao/便便.png" alt="便便" style="vertical-align: middle;">',
'@[不高兴]' => '<img src="/OwO/paopao/不高兴.png" alt="不高兴" style="vertical-align: middle;">',
'@[彩虹]' => '<img src="/OwO/paopao/彩虹.png" alt="彩虹" style="vertical-align: middle;">',
'@[茶杯]' => '<img src="/OwO/paopao/茶杯.png" alt="茶杯" style="vertical-align: middle;">',
'@[吃瓜]' => '<img src="/OwO/paopao/吃瓜.png" alt="吃瓜" style="vertical-align: middle;">',
'@[吃翔]' => '<img src="/OwO/paopao/吃翔.png" alt="吃翔" style="vertical-align: middle;">',
'@[大拇指]' => '<img src="/OwO/paopao/大拇指.png" alt="大拇指" style="vertical-align: middle;">',
'@[蛋糕]' => '<img src="/OwO/paopao/蛋糕.png" alt="蛋糕" style="vertical-align: middle;">',
'@[嘚瑟]' => '<img src="/OwO/paopao/嘚瑟.png" alt="嘚瑟" style="vertical-align: middle;">',
'@[灯泡]' => '<img src="/OwO/paopao/灯泡.png" alt="灯泡" style="vertical-align: middle;">',
'@[乖]' => '<img src="/OwO/paopao/乖.png" alt="乖" style="vertical-align: middle;">',
'@[哈哈]' => '<img src="/OwO/paopao/哈哈.png" alt="哈哈" style="vertical-align: middle;">',
'@[汗]' => '<img src="/OwO/paopao/汗.png" alt="汗" style="vertical-align: middle;">',
'@[呵呵]' => '<img src="/OwO/paopao/呵呵.png" alt="呵呵" style="vertical-align: middle;">',
'@[黑线]' => '<img src="/OwO/paopao/黑线.png" alt="黑线" style="vertical-align: middle;">',
'@[红领巾]' => '<img src="/OwO/paopao/红领巾.png" alt="红领巾" style="vertical-align: middle;">',
'@[呼]' => '<img src="/OwO/paopao/呼.png" alt="呼" style="vertical-align: middle;">',
'@[花心]' => '<img src="/OwO/paopao/花心.png" alt="花心" style="vertical-align: middle;">',
'@[滑稽]' => '<img src="/OwO/paopao/滑稽.png" alt="滑稽" style="vertical-align: middle;">',
'@[惊恐]' => '<img src="/OwO/paopao/惊恐.png" alt="惊恐" style="vertical-align: middle;">',
'@[惊哭]' => '<img src="/OwO/paopao/惊哭.png" alt="惊哭" style="vertical-align: middle;">',
'@[惊讶]' => '<img src="/OwO/paopao/惊讶.png" alt="惊讶" style="vertical-align: middle;">',
'@[开心]' => '<img src="/OwO/paopao/开心.png" alt="开心" style="vertical-align: middle;">',
'@[酷]' => '<img src="/OwO/paopao/酷.png" alt="酷" style="vertical-align: middle;">',
'@[狂汗]' => '<img src="/OwO/paopao/狂汗.png" alt="狂汗" style="vertical-align: middle;">',
'@[蜡烛]' => '<img src="/OwO/paopao/蜡烛.png" alt="蜡烛" style="vertical-align: middle;">',
'@[懒得理]' => '<img src="/OwO/paopao/懒得理.png" alt="懒得理" style="vertical-align: middle;">',
'@[泪]' => '<img src="/OwO/paopao/泪.png" alt="泪" style="vertical-align: middle;">',
'@[冷]' => '<img src="/OwO/paopao/冷.png" alt="冷" style="vertical-align: middle;">',
'@[礼物]' => '<img src="/OwO/paopao/礼物.png" alt="礼物" style="vertical-align: middle;">',
'@[玫瑰]' => '<img src="/OwO/paopao/玫瑰.png" alt="玫瑰" style="vertical-align: middle;">',
'@[勉强]' => '<img src="/OwO/paopao/勉强.png" alt="勉强" style="vertical-align: middle;">',
'@[你懂的]' => '<img src="/OwO/paopao/你懂的.png" alt="你懂的" style="vertical-align: middle;">',
'@[怒]' => '<img src="/OwO/paopao/怒.png" alt="怒" style="vertical-align: middle;">',
'@[喷]' => '<img src="/OwO/paopao/喷.png" alt="喷" style="vertical-align: middle;">',
'@[钱]' => '<img src="/OwO/paopao/钱.png" alt="钱" style="vertical-align: middle;">',
'@[钱币]' => '<img src="/OwO/paopao/钱币.png" alt="钱币" style="vertical-align: middle;">',
'@[弱]' => '<img src="/OwO/paopao/弱.png" alt="弱" style="vertical-align: middle;">',
'@[三道杠]' => '<img src="/OwO/paopao/三道杠.png" alt="三道杠" style="vertical-align: middle;">',
'@[沙发]' => '<img src="/OwO/paopao/沙发.png" alt="沙发" style="vertical-align: middle;">',
'@[生气]' => '<img src="/OwO/paopao/生气.png" alt="生气" style="vertical-align: middle;">',
'@[胜利]' => '<img src="/OwO/paopao/胜利.png" alt="胜利" style="vertical-align: middle;">',
'@[手纸]' => '<img src="/OwO/paopao/手纸.png" alt="手纸" style="vertical-align: middle;">',
'@[睡觉]' => '<img src="/OwO/paopao/睡觉.png" alt="睡觉" style="vertical-align: middle;">',
'@[酸爽]' => '<img src="/OwO/paopao/酸爽.png" alt="酸爽" style="vertical-align: middle;">',
'@[太开心]' => '<img src="/OwO/paopao/太开心.png" alt="太开心" style="vertical-align: middle;">',
'@[太阳]' => '<img src="/OwO/paopao/太阳.png" alt="太阳" style="vertical-align: middle;">',
'@[吐]' => '<img src="/OwO/paopao/吐.png" alt="吐" style="vertical-align: middle;">',
'@[吐舌]' => '<img src="/OwO/paopao/吐舌.png" alt="吐舌" style="vertical-align: middle;">',
'@[挖鼻]' => '<img src="/OwO/paopao/挖鼻.png" alt="挖鼻" style="vertical-align: middle;">',
'@[委屈]' => '<img src="/OwO/paopao/委屈.png" alt="委屈" style="vertical-align: middle;">',
'@[捂嘴笑]' => '<img src="/OwO/paopao/捂嘴笑.png" alt="捂嘴笑" style="vertical-align: middle;">',
'@[犀利]' => '<img src="/OwO/paopao/犀利.png" alt="犀利" style="vertical-align: middle;">',
'@[香蕉]' => '<img src="/OwO/paopao/香蕉.png" alt="香蕉" style="vertical-align: middle;">',
'@[小乖]' => '<img src="/OwO/paopao/小乖.png" alt="小乖" style="vertical-align: middle;">',
'@[小红脸]' => '<img src="/OwO/paopao/小红脸.png" alt="小红脸" style="vertical-align: middle;">',
'@[笑尿]' => '<img src="/OwO/paopao/笑尿.png" alt="笑尿" style="vertical-align: middle;">',
'@[笑眼]' => '<img src="/OwO/paopao/笑眼.png" alt="笑眼" style="vertical-align: middle;">',
'@[心碎]' => '<img src="/OwO/paopao/心碎.png" alt="心碎" style="vertical-align: middle;">',
'@[星星月亮]' => '<img src="/OwO/paopao/星星月亮.png" alt="星星月亮" style="vertical-align: middle;">',
'@[呀咩爹]' => '<img src="/OwO/paopao/呀咩爹.png" alt="呀咩爹" style="vertical-align: middle;">',
'@[药丸]' => '<img src="/OwO/paopao/药丸.png" alt="药丸" style="vertical-align: middle;">',
'@[咦]' => '<img src="/OwO/paopao/咦.png" alt="咦" style="vertical-align: middle;">',
'@[疑问]' => '<img src="/OwO/paopao/疑问.png" alt="疑问" style="vertical-align: middle;">',
'@[阴险]' => '<img src="/OwO/paopao/阴险.png" alt="阴险" style="vertical-align: middle;">',
'@[音乐]' => '<img src="/OwO/paopao/音乐.png" alt="音乐" style="vertical-align: middle;">',
'@[真棒]' => '<img src="/OwO/paopao/真棒.png" alt="真棒" style="vertical-align: middle;">',
'@[nico]' => '<img src="/OwO/paopao/nico.png" alt="nico" style="vertical-align: middle;">',
'@[OK]' => '<img src="/OwO/paopao/OK.png" alt="OK" style="vertical-align: middle;">',
'@[what]' => '<img src="/OwO/paopao/what.png" alt="what" style="vertical-align: middle;">'
);
return strtr($comment_text,$data_OwO);
}
add_filter( 'comment_text' , 'comment_add_owo', 20, 2);
?>
附上我使用的表情及OwO.json文件（OwO.json太长就不贴出来了）下载
大概之后就会长期咸鱼了
WordPress后台编辑器工具栏表情
网友突然问道这个可不可以在编辑文章的时候添加表情，这个肯定是可以的。但是我对WP的钩子不太熟悉，于是我去查了下，实现了所需要的功能。
首先在function.php里添加代码（这里把文字替换为表情输出，文章页面都可以）
<?php
/**
*替换文章页面OwO表情
*by 兰陵
*https://blog.thkira.com/
*/
//文章替换表情
function content_OwO($content) {
$data_OwO = array(
//数组和上面相同，篇幅过长，我就不贴了，可以把两个函数合并
);
return strtr($content,$data_OwO);
}
add_filter( 'the_content' , 'content_OwO' );
function edit_OwO() {
//判断用户是否有编辑文章和页面的权限
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
//判断用户是否使用可视化编辑器
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_OwO_button' );
}
}
add_action('init', 'edit_OwO');
function add_plugin( $plugin_array ) {
$plugin_array['OwO'] = get_template_directory_uri() . '/js/OwO_button.js'; //OwO按钮的js路径
return $plugin_array;
}
function register_OwO_button( $buttons ) {
array_push( $buttons, "OwO" );//添加一个OwO按钮
return $buttons;
}
?>
在编辑器中引入的js，OwO自带的css和js肯定是不能用的，于是我自己写了一个，不同的博客情况不同，仅供参考
/*******************************************************************************
* @author 兰陵
* @site https://blog.thkira.com/
*******************************************************************************/
(function() {
loadCss("./css/OwO_button.css");//OwO按钮的css路径
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
function getHtml() {
var s = "";
var xmlhttp;
var url = "OwO.min.json";
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < Object.keys(json).length; i++) {
if (i == 0) for (var a = 0, n = json[Object.keys(json)[i]].container; a < n.length; a++) {//颜文字
s += '<li title="' + n[a].text + '" data-OwO=\'' + n[a].icon + '\'>' + n[a].icon + "</li>";
} else if (i == 1) for (var a = 0, n = json[Object.keys(json)[i]].container; a < n.length; a++) {//阿鲁
s += '<li title="' + n[a].text + '" data-OwO="@(' + n[a].text + ')">' + n[a].icon + "</li>";
} else for (var a = 0, n = json[Object.keys(json)[i]].container; a < n.length; a++) {//泡泡
s += '<li title="' + n[a].text + '" data-OwO="@[' + n[a].text + ']">' + n[a].icon + "</li>";
}
}
}
};
xmlhttp.open("GET", url, false);//同步加载
xmlhttp.send();
return '<ul class="OwO-button">' + s + "</ul>";
}
tinymce.PluginManager.add("OwO", function(editor, url) {
editor.addButton("OwO", {
type:"panelbutton",
panel:{
classes:"smily",
role:"application",
autohide:true,
html:getHtml,
onclick:function(e) {
var linkElm = editor.dom.getParent(e.target, "li");
if (linkElm) {
editor.insertContent(linkElm.getAttribute("data-OwO"));
this.hide();
}
}
},
tooltip:"OwO表情",//为你的按钮取个漂亮的名字
image:"dogelv.png"//OwO按钮图标
});
});
})();
适合本站的样式：
.OwO-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;width:320px!important;height:250px!important;padding:10px!important;margin:0!important;overflow-y:scroll}
.OwO-button li{list-style-type:none;float:left;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}
.OwO-button li:hover{background:#eee;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}
.OwO-button li img{max-width:100%}
@-webkit-keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}
18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}
30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}
44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}
60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}
86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}
92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}
94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}
96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
0%,to{-webkit-transform:translate(0) rotate(0);transform:translate(0) rotate(0)}
}
@keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}
18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}
30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}
44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}
60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}
86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}
92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}
94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}
96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
0%,to{-webkit-transform:translate(0) rotate(0);transform:translate(0) rotate(0)}
}
效果如下：
如有问题，欢迎提问
Emlog后台编辑器工具栏表情
之前森七一直跑来骚扰我问我怎么弄
，他使用的是Emlog。我也没用过啊，我也不知道钩子，自己去读文档！。。。最后还是我去弄了_(:з」∠)_
根据他的情况，评论的替换我是直接在模板module.php里修改函数的。之后他一直闹要像我后台一样的添加表情_(:з」∠)_
我没用过Emlog啊，要哭。我去看了一下，Emlog使用的是KindEditor编辑器，也就是说我无法像WP一样添加动作。于是我读了一下KindEditor的文档，了解怎么做了。
如果像官方说的那样，添加到各个编辑页面，那岂不是要编辑很多文件，于是我直接对KindEditor进行了修改（其实，像官方说的那个添加插件，我没成功。而且直接修改还更方便一些）
步骤
1.添加plugins/owo/owo.js文件
/*******************************************************************************
* @author 兰陵
* @site https://blog.thkira.com/
*******************************************************************************/
KindEditor.plugin("owo", function(K) {
var editor = this, name = "owo", wrapperDiv = "";
editor.clickToolbar(name, function() {
if (!wrapperDiv) wrapperDiv = getHtml();
var menu = editor.createMenu({
name:name,
width:320
});
menu.div.append(wrapperDiv);
var obj = document.getElementById("OwO-button");
obj.addEventListener("click", function(ev) {
var target = ev.target;
if (target.getAttribute("alt")) {
editor.insertHtml(target.outerHTML);
editor.hideMenu();
}
});
});
});
function getHtml() {
var s = "";
var xmlhttp;
var url = "./editor/plugins/owo/OwO.min.json";
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
for (var i = 1; i < Object.keys(json).length; i++) {
for (var a = 0, n = json[Object.keys(json)[i]].container; a < n.length; a++) {
s += '<li title="' + n[a].text + '">' + n[a].icon + "</li>";
}
}
}
};
xmlhttp.open("GET", url, false);
xmlhttp.send();
return '<ul id="OwO-button">' + s + "</ul>";
}
2.定义语言
修改lang/zh_CN.js，添加一组
owo : 'owo表情'
3.向items数组里添加owo，定义工具栏图标及owo的CSS
①修改kindeditor.js，在最后的items数组里把owo添加到你觉得合适的位置，并且引入css文件
loadCss("editor/plugins/owo/owo.css");
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
②加载需要的css文件（示例）
.ke-icon-owo{background-image:url('图标地址')!important;background-size:16px;width:16px;height:16px}
#OwO-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;width:360px!important;height:250px!important;padding:10px!important;margin:0!important;overflow-y:scroll}
#OwO-button li{list-style-type:none;float:left;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}
#OwO-button li:hover{background:#eee;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}
#OwO-button li img{max-width:100%}
.OwO-img{border:none;vertical-align:middle}
/*动画效果和之前相同*/
效果如下：
以上是根据森七站点的情况进行的修改，如有问题，欢迎提问
在线咨询
还有最新下载地址吗