UEditor在WordPress使用中工具栏浮动修改(ueditor被admin遮挡)

  • A+
所属分类:WordPress

在Wordpress中使用UEditor感觉就是舒服。可是稍微有点不足的是在编辑的时候滚动时Wordpress原来的工具栏将会遮盖一部分UEditor的工具栏UEditor在WordPress使用中工具栏浮动修改(ueditor被admin遮挡)

这给人的感觉就有点不完美了。没有办法了就只有自己来修改下了。

我找到autofloat.js文件,可以在editor_all.js文件中搜索autofloat找到然后发现

这一行代码,editor_all.js大概在9145行,这个是写的工具栏top的位置我按照自己的需要改成

然后在下面

这里修改滚动时触发的位置

这样应该就可以了,于是我保存,打开浏览器看了下,效果如下

UEditor在WordPress使用中工具栏浮动修改(ueditor被admin遮挡)

好没有被遮盖了。

不过我又发现了一个问题,在全屏的时候又被遮盖了。

UEditor在WordPress使用中工具栏浮动修改(ueditor被admin遮挡)

这个就应该是层级的问题,我用firebug工具发现Wordpress工具栏的层级是99999,在配置文件里zIndex:100000比Wordpress的大1,我保存清除缓存刷新下。

居然没有改到,汗呀。我然后找到编辑器层级定义的位置,在editor.js中,大概在editor_all.js第16287行有这么一行代码

应该是正确的呀,怎么会有问题呢?我很疑惑!不过不管,然后我做了很多修改,最后我稍微改下,把zIndex改成xIndex,在配置文件中也做了同样的修改,保存刷新下。咦!居然可以了。

那好,那暂时就这样改吧,我之后会问问百度的。

现在全屏也可以了,如下

UEditor在WordPress使用中工具栏浮动修改(ueditor被admin遮挡)

不过这时在不是全屏的时候,向下滚动时,会把Wordpress工具栏遮盖了,而我不想这个时候的Wordpress工具栏被遮盖了,于是稍微改下zIndex:100000改成 zIndex:99998就可以了,呵呵。

不过还有个问题,因为在刚才我修改的浮动的偏移,我在查看HTML源码的时候,工具栏会往下偏移

UEditor在WordPress使用中工具栏浮动修改(ueditor被admin遮挡)

那再来修改autofloat.js,把原来的updateFloating方法还是改回原来,然后拷贝一份并把方法名改为updateFloating0如下

然后,找到下面的监听事件autoheightchanged,改为

这样应该就考虑周到了吧,保存刷新。

好了点击查看源代码也正常了

UEditor在WordPress使用中工具栏浮动修改(ueditor被admin遮挡)

好了,最后为了性能考虑,也压缩下吧,这个就不讲了呵呵。

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:3   其中:访客  3   博主  0

    • avatar 游者记 来自天朝的朋友 谷歌浏览器 Windows 10 河北省石家庄市 电信 0

      没看明白是怎么弄得啊,介绍的代码也找不到,我的也是被wordpress最上面的黑条挡住编辑器工具栏最上端

      • avatar zhibolife.com 来自天朝的朋友 谷歌浏览器 Windows XP 江苏省南京市 电信 3

        不知道怎么回事,我用了你的方法,把下面两处都改了也保存了,可还是不行。

        toolbarBox.style.top = ’28px’;

        if(rect3.top 0) {
        setFloating();
        }else{
        unsetFloating();
        }

          • avatar 菜青虫 来自天朝的朋友 傲游浏览器 Windows 7 湖南省长沙市 电信 2

            @zhibolife.com 要修改2个地方,修改完以后,更新文件,应该是OK了的.