MyQuan

解决Typecho EditorMD插件在Chrome下无法点击编辑器工具栏按钮的问题
前言 今天是博客全新上线的第二天,等我完善好博客想要写篇文章的时候,却发现博客的EditorMD编辑器的工...
扫描右侧二维码阅读全文
05
2019/03

解决Typecho EditorMD插件在Chrome下无法点击编辑器工具栏按钮的问题

  • 前言

今天是博客全新上线的第二天,等我完善好博客想要写篇文章的时候,却发现博客的EditorMD编辑器的工具栏点了好无反应,然后我就怀疑是不是插件问题,结果整了半天也没弄好。
这个时候,万能的群友一语道破!

editor.md中函数editormd.mouseOrTouch有问题。
它原本的目的是判断设备是否有触摸屏,然后只给按钮添加“click”事件或则只添加“touchend”事件。但是没有考虑到有触摸屏的笔记本,此时只工具栏按钮只添加了“touchend”事件,即按钮不能用鼠标点击,触摸屏就可以点击。
原来是EditorMD的代码的问题啊,和我的设置没关系。但是,我得用啊,只能自己动手修复咯。

解决方式

出错代码

 /**
     * 鼠标和触摸事件的判断/选择方法
     * MouseEvent or TouchEvent type switch
     * 
     * @param   {String} [mouseEventType="click"]    供选择的鼠标事件
     * @param   {String} [touchEventType="touchend"] 供选择的触摸事件
     * @returns {String} EventType                   返回事件类型名称
     */

    editormd.mouseOrTouch = function(mouseEventType, touchEventType) {
        mouseEventType = mouseEventType || "click";
        touchEventType = touchEventType || "touchend";

        var eventType  = mouseEventType;

        try {
            document.createEvent("TouchEvent");
            eventType = touchEventType;
        } catch(e) {}

        return eventType;
    };

github地址:https://github.com/pandao/editor.md/blob/master/editormd.js#L4468

修改代码

editormd.mouseOrTouch = function(mouseEventType, touchEventType) {
        mouseEventType = mouseEventType || "click";
        touchEventType = touchEventType || "touchend";

        var eventType  = mouseEventType;

        try {
            document.createEvent("TouchEvent");
           // eventType = touchEventType;
        } catch(e) {
            console.log(e.toString());
        }
        //解决chrome浏览器不绑定工具栏点击事件
        var userAgentInfo = navigator.userAgent;
      //  console.log(userAgentInfo);
        var Agents = new Array("Android", "iPhone",  "Windows Phone", "iPad", "iPod");
        var flag = false;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = true;
                break;
            }
        }
        if(flag){
            eventType = touchEventType;
        }
       // console.log(eventType);
        return eventType;
    };

:修改代码参考于独倚烟花笑

在此代码的基础上,我针对于editormd.min.js文件内的代码做了修改:

原代码

t.mouseOrTouch=function(e,t){e=e||"click",t=t||"touchend";var i=e;try{document.createEvent("TouchEvent"),i=t}catch(o){}return i}

修改后的代码

t.mouseOrTouch=function(e,t){e=e||"click",t=t||"touchend";var i=e;try{document.createEvent("TouchEvent")}catch(o){} var userAgentInfo=navigator.userAgent;var Agents=new Array("Android", "iPhone", "Windows Phone", "iPad", "iPod");var flag=false;for (var v = 0; v < Agents.length; v++) {if(userAgentInfo.indexOf(Agents[v])>0){flag=true;break;}}if(flag){i=t;}return i}

至此这个问题就算是解决了。剩下的就是上传到服务器了。
打开xfpt,将附件中的editormd.min.js.txt文件改名为editormd.min.js上传到/usr/plugins/EditorMD/js目录下,直接覆盖原文件。

到此就算是彻彻底底的解决了,现在刷新下就可以正常使用了。

附件

editormd.min.js.txt

参考资料

https://github.com/pandao/editor.md/blob/master/editormd.js
https://blog.csdn.net/smallbabylong/article/details/83658176
https://github.com/JaxsonWang/WP-Editor.md/issues/153

Last modification:May 27th, 2019 at 06:12 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment