今天在集成UEditor的时候发现了个问题,就是我有一个固顶的导航,使用固定定位在最上面,然后向下滚动的时候,发现UEditor的工具栏被导航挡住了,影响使用体验,于是翻了翻资料,查了查配置文件,终于找到了,和大家分享学习一下。
首先打开UE的配置文件:ueditor.config.js
然后搜索"topOffset"这个参数,把他调整为适应的高度就好啦。。
源码分析:
接下来我们看一下这块源码(我的是源码版的,在aotufloat.js里,打包版的可以全局搜一下):
注意if (toolbarBox.style.position != "fixed") 这个判断,说明当工具栏悬浮的时候,走以下配置,我们可以看到topOffset这个变量是根据toolbarBox来的,往上翻一翻,toolbarBox是从option里来的,接下来就清晰了,直接到config里面找到topOffset这个option,改成我们需要的就可以了。
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") {
//注意这里,当为fixed的时候,加了以下样式
toolbarBox.style.position = "fixed";
toolbarBox.style.top = topOffset + "px";
(origalFloat == "absolute" || origalFloat == "relative") &&
parseFloat(origalLeft) &&
(toolbarBox.style.left = toobarBoxPos.x + "px");
}
}
}