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

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

版本说明

修改的版本：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.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()}

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

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