解决UEditor悬浮工具栏被页面顶部固定导航遮挡

今天在集成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");
			}
		}
	}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值