UEditor点击多图上传后隐藏浏览器滚动条防止滚动穿透

UEditor的多图上传中的在线管理加载图片默认是按往期一个文件里面的图片加载完再去加载另一个文件里的图片 如果加载过程太长 用户可能会一直来回滚动或者以为所有图片都加载完毕(如下图所示) 所以想在用户点击多图上传后把浏览器的滚动条隐藏掉

想到两种方案

1、改UEditor里面php/config.json文件 使每一天不再新建一个文件夹 让图片一次性加载完

因为用户已经上传了多张图片 工程量有点大 然后想到第二种

2、能不能当用户点击多图上传的按钮时 我就把右边的滚动条给隐藏了 第一次尝试

//JQuery代码
$(document).on('click','.edui-for-insertimage',function (){
  $(this).toggle(function (){
    console.log("打开");
    $('html,body').css('overflow','hidden');
  },function (){
    console.log("关闭");
    $('html,body').removeAttr('style');
  });
  $(this).trigger('click');
});

发现UEditor并不能如我想的那样 如下效果图

然后我开始研究UEditor 1.4.3.2的源码

发现绑定事件都在ueditor.all.js这个文件里

//在26852行发现关闭按钮事件
this.closeButton = new Button({
  className: 'edui-dialog-closebutton',
  title: me.closeDialog,
  theme:theme,
  onclick: function (){
    me.close(false);
    //加入下面代码 参考图如下
    $('html,body').removeAttr('style');
  }
});
//在27843行发现确定和取消按钮事件
}, type == 'ok' ? {
  buttons:[
  {
    className:'edui-okbutton',
    label:editor.getLang("ok"),
    editor:editor,
    onclick:function () {
        dialog.close(true);
        //加入下面的代码 参考图如下
        $('html,body').removeAttr('style');
    }
  },
  {
    className:'edui-cancelbutton',
    label:editor.getLang("cancel"),
    editor:editor,
    onclick:function () {
        dialog.close(false);
        //加入下面的代码 参考图如下
        $('html,body').removeAttr('style');
    }
 }
]
}
//在27867行发现绑定事件
var ui = new editorui.Button({
  className:'edui-for-' + cmd,
  title:title,
  onclick:function () {
    if (dialog) {
      switch (cmd) {
        case "wordimage":
           var images = editor.execCommand("wordimage");
           if (images && images.length) {
             dialog.render();
             dialog.open();
           }
        break;
        //加入下面代码 参考图如下
        case "insertimage":
           dialog.render();
           dialog.open();
           html.css('overflow','hidden');
        break;
        case "scrawl":
          if (editor.queryCommandState("scrawl") != -1) {
            dialog.render();
            dialog.open();
          }
        break;
        default:
        dialog.render();
        dialog.open();
     }
  }
},

保存并压缩js 上传到服务器发现需求完成

后续更新了更优的方案..链接在下面

后记:近期可能会发布一篇UEditor优化文章

ueditor.all.min.js 本来大小:350K
ueditor.all.min.js 优化后:251K
ueditor.config.js 本来大小:20K
ueditor.config.js 优化并压缩后:1.5K
ueditor.min.css 本来大小:34K
ueditor.min.css 优化后:29K(还在优化)

说点什么

avatar
  Subscribe  
提醒