百度编辑器悬浮工具栏被页面顶部固定导航遮挡怎么办

知兮丶青 js
阅读(86) 2021-01-11
百度编辑器悬浮工具栏被页面顶部固定导航遮挡怎么办
百度编辑器悬浮工具栏被页面顶部固定导航遮挡怎么办

百度ueditor编辑器悬浮工具栏toolbar被页面顶部固定fixed导航条遮挡怎么办?第一时间想到去找配置,找了一圈并没有找到相应的配置,然后能不能改css的z-index来调整,终究不是很完美,现在也只能通过改js源码,对编辑器不是很了解,只能去找相应位置进行top修改。废话不多说,先上效果图。

解决百度编辑器悬浮工具栏被fixed导航栏目遮住问题.png


版本说明

修改的版本:UE.version "1.4.3"


确认源码位置

按F12进行debug,不难发现,当滚动到顶部时,工具栏被赋予style进行顶部固定

<div id="edui1_toolbarbox" class="edui-editor-toolbarbox edui-default" style="width: 745px; z-index: 1000; position: fixed; top: 0px;">...</div>


发现控制源代码

在ueditor.all.js找到控制此toolbar的源代码。

...
function setFloating(){
    var toobarBoxPos = domUtils.getXY(toolbarBox),
        origalFloat = domUtils.getComputedStyle(toolbarBox,'position'),
        origalLeft = domUtils.getComputedStyle(toolbarBox,'left');
    toolbarBox.style.width = toolbarBox.offsetWidth + 'px';
    toolbarBox.style.zIndex = me.options.zIndex * 1 + 1;
    toolbarBox.parentNode.insertBefore(placeHolder, toolbarBox);
    if (LteIE6 || (quirks && browser.ie)) {
        if(toolbarBox.style.position != 'absolute'){
            toolbarBox.style.position = 'absolute';
        }
        toolbarBox.style.top = (document.body.scrollTop||document.documentElement.scrollTop) - orgTop + topOffset  + 'px';
    } else {
        if (browser.ie7Compat && flag) {
            flag = false;
            toolbarBox.style.left =  domUtils.getXY(toolbarBox).x - document.documentElement.getBoundingClientRect().left+2  + 'px';
        }
        if(toolbarBox.style.position != 'fixed'){
            toolbarBox.style.position = 'fixed';
            toolbarBox.style.top = topOffset +"px";
            ((origalFloat == 'absolute' || origalFloat == 'relative') && parseFloat(origalLeft)) && (toolbarBox.style.left = toobarBoxPos.x + 'px');
        }
    }
}
...
function updateFloating(){
    var rect3 = getPosition(me.container);
    var offset=me.options.toolbarTopOffset||0;
    if (rect3.top < 0 && rect3.bottom - toolbarBox.offsetHeight > offset) {
        setFloating();
    }else{
        unsetFloating();
    }
}
...


修改源代码

我们要对段这源代码进行修改,滚动时能使之符合编辑器悬浮工具栏页面导航栏下面靠停。不再滚动到top=0才悬停,被页面导航栏遮住。

第一步:

修改:ueditor.config.js,加入配置:添加pageTopBarHeight配置,例如我的页面导航高度48px。

window.UEDITOR_CONFIG = {
    ...
    , pageTopBarHeight: 48
    ...
}


第二步:

修改:ueditor.all.js,在相应的源码处加入me.options.pageTopBarHeight代码,何时靠停,何时消失。下面是修改好的源代码(如图),复制粘贴就可以用了。注意别把“...”也复制过去了

function setFloating(){
    var toobarBoxPos = domUtils.getXY(toolbarBox),
        origalFloat = domUtils.getComputedStyle(toolbarBox,'position'),
        origalLeft = domUtils.getComputedStyle(toolbarBox,'left');
    toolbarBox.style.width = toolbarBox.offsetWidth + 'px';
    toolbarBox.style.zIndex = me.options.zIndex * 1 + 1;
    toolbarBox.parentNode.insertBefore(placeHolder, toolbarBox);
    if (LteIE6 || (quirks && browser.ie)) {
        if(toolbarBox.style.position != 'absolute'){
            toolbarBox.style.position = 'absolute';
        }
        toolbarBox.style.top = (document.body.scrollTop||document.documentElement.scrollTop) - orgTop + me.options.pageTopBarHeight + topOffset  + 'px';
    } else {
        if (browser.ie7Compat && flag) {
            flag = false;
            toolbarBox.style.left =  domUtils.getXY(toolbarBox).x - document.documentElement.getBoundingClientRect().left+2  + 'px';
        }
        if(toolbarBox.style.position != 'fixed'){
            toolbarBox.style.position = 'fixed';
            toolbarBox.style.top = topOffset + me.options.pageTopBarHeight +"px";
            ((origalFloat == 'absolute' || origalFloat == 'relative') && parseFloat(origalLeft)) && (toolbarBox.style.left = toobarBoxPos.x + 'px');
        }
    }
}
...
function updateFloating(){
    var rect3 = getPosition(me.container);
    var offset=me.options.toolbarTopOffset||0;
    if (rect3.top < me.options.pageTopBarHeight && rect3.bottom - toolbarBox.offsetHeight - me.options.pageTopBarHeight > offset) {
        setFloating();
    }else{
        unsetFloating();
    }
}
...

ueditor.js修改位置截图.png

如果是使用的ueditor.all.min.js怎么办?一样办也是这样修改(如图)。

function c(){var a=domUtils.getXY(k),b=domUtils.getComputedStyle(k,"position"),c=domUtils.getComputedStyle(k,"left");k.style.width=k.offsetWidth+"px",k.style.zIndex=1*f.options.zIndex+1,k.parentNode.insertBefore(q,k),o||p&&browser.ie?("absolute"!=k.style.position&&(k.style.position="absolute"),k.style.top=(document.body.scrollTop||document.documentElement.scrollTop)-l+f.options.pageTopBarHeight+i+"px"):(browser.ie7Compat&&r&&(r=!1,k.style.left=domUtils.getXY(k).x-document.documentElement.getBoundingClientRect().left+2+"px"),"fixed"!=k.style.position&&(k.style.position="fixed",k.style.top=i+f.options.pageTopBarHeight+"px",("absolute"==b||"relative"==b)&&parseFloat(c)&&(k.style.left=a.x+"px")))}function d(){r=!0,q.parentNode&&q.parentNode.removeChild(q),k.style.cssText=j}function e(){var a=m(f.container),b=f.options.toolbarTopOffset||0;a.topb?c():d()}

min版的修改截图.png

好了这下完美解决了。如还发现有不足之希望指出!



原创文章,转载请注明出处:https://www.weizhixi.com/article/108.html