Emlog后台编辑器工具栏表情OwO 详细版

会飞的鱼 2 1960 2017年10月12日

评论的表情替换我是直接在模板module.php里修改函数的，现在试试给后台添加OwO表情。Emlog使用的是KindEditor编辑器，于是读了一下KindEditor的文档，了解怎么做了。如果像官方说的那样，添加到各个编辑页面，那岂不是要编辑很多文件，于是直接对KindEditor进行了修改（其实，像官方说的那个添加插件，我没成功。而且直接修改还更方便一些）

添加plugins/owo/owo.js文件（在后台目录editor里）

/*******************************************************************************
* @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>";
}

这里的json和之前的一样，为了防止还有人搞混了，需要的js和css,json我都打包了点我下载，文件里面的路径都要替换成自己图片和文件所在的目录哦！

定义语言

修改lang/zh_CN.js，添加一组

owo : 'owo表情'

Emlog后台编辑器工具栏表情OwO

向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);
}

Emlog后台编辑器工具栏表情OwO

②加载需要的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}
/*动画效果和之前相同*/

已经打包在上面的压缩包里了，注意修改图片地址哦！

效果如下：

Emlog后台编辑器工具栏表情OwO