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

  • 内容
  • 相关

评论的表情替换我是直接在模板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

 以上是根据森七博客的情况进行的修改,如有问题,欢迎提问doge(全程协助小兰陵)

本文标签:

版权声明:若无特殊注明,本文皆为《会飞的鱼》原创,转载请保留文章出处。

本文链接:Emlog后台编辑器工具栏表情OwO 详细版 - https://f162.cn/post/292

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知

评论

2条评论
  1. avatar

    王晓明博客 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    (╯°A°)╯︵○○○装完逼就跑

    山东省青岛市 联通

    1. avatar

      她说 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

      Σ(゚д゚;)(((┏(; ̄▽ ̄)┛装完逼就跑

      江苏省宿迁市 电信