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 - http://www.mosq.cn/post-220.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注。采用输入QQ快速评论,有人回复邮件通知。

评论

21条评论
  1. avatar

    冷雪 Lv.1 Sogou Explorer Sogou Explorer Windows 8.1 x64 Edition Windows 8.1 x64 Edition 回复

    求大佬简单呗,看不懂泪

    1. 森七 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      回复了冷雪:emm...哪里不懂可以Q我,不过应该很明白了才对 不出所料

  2. avatar

    何湘辉博客 Lv.2 Chrome 60.0.3112.113 Chrome 60.0.3112.113 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    哈哈,不错,这些表情到时候我也要弄上

    1. avatar

      初夏 Lv.1 Safari 10.1.2 Safari 10.1.2 Mac OS X 10.12.6 Mac OS X 10.12.6 回复

      (╯‵□′)╯︵┴─┴
      现在去试试,

      1. 森七 uBrowser 6.1.3397.16 uBrowser 6.1.3397.16 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        回复了初夏:击掌

    2. avatar

      杨小杰 Lv.4 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      终于把教程写的我都看明白了

      1. 森七 uBrowser 6.1.3397.16 uBrowser 6.1.3397.16 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        回复了杨小杰:不知道该高兴还是该哭装大款

    3. avatar

      杨小杰 Lv.4 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      贼棒,马上搬砖

      1. avatar

        Flyer Lv.1 Safari 10.0 Safari 10.0 iPhone iOS 10.3.3 iPhone iOS 10.3.3 回复

        感觉好牛逼的样子

        1. 森七 uBrowser 6.1.3397.16 uBrowser 6.1.3397.16 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          回复了Flyer:一般一般~( ̄▽ ̄)C❀

      2. avatar

        37分 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows Windows 回复

        ヾ(≧∇≦*)ゝ小怒啊

        1. 森七 uBrowser 6.1.3397.16 uBrowser 6.1.3397.16 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          回复了37分:小乖

      3. avatar

        渡边桥 ゛ Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        ✧*。٩(ˊωˋ*)و✧*。还是感觉贼麻烦

        1. 森七 uBrowser 6.1.3397.16 uBrowser 6.1.3397.16 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          回复了渡边桥 ゛:慢慢来

      4. avatar

        心尘 Lv.2 Firefox 54.0 Firefox 54.0 Windows Windows 回复

        哭泣升级3.8之后就用不了前台的了

        1. 森七 uBrowser 6.1.3397.16 uBrowser 6.1.3397.16 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          回复了心尘:改,就是该坐等

        2. 心尘 Lv.2 Chrome 50.0.2661.102 Chrome 50.0.2661.102 Windows Windows 回复

          回复了森七:(๑•́ ₃ •̀๑)喜极而泣

      5. avatar

        怪三岁. Lv.2 Chrome 38.0.0.0 Chrome 38.0.0.0 Android 7.1.1 Android 7.1.1 回复

        每次都教程都贼粗虐,看不懂

        1. 森七 Chrome 40.0.2214.89 Chrome 40.0.2214.89 Android 5.1.1 Android 5.1.1 回复

          回复了怪三岁.:这很简单又简洁又明白的好不好不高兴