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

发布时间:2024年01月16日

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

文章来源:https://blog.csdn.net/ydZ157/article/details/135631687
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。