Ueditor全屏事件时，编辑器左侧被内容遮挡（提供几种解决思路） |
您所在的位置：网站首页 › ueditor编辑器授权访问 › Ueditor全屏事件时，编辑器左侧被内容遮挡（提供几种解决思路） |
Ueditor全屏事件时，编辑器左侧被内容遮挡（提供几种解决思路）
|
描述：在后台管理系统页面引入ueditor，点击全屏时，编辑器正常全屏显示，但是菜单栏处把编辑器遮挡了。
如图所示：  原因：通过开发工具的元素排查，发生这个问题的原因在于页面元素某个元素导致
注：本文是由于 #wrapper #content-wrapper的overflow-x属性设置问题导致，如果你也遇到全屏被遮挡内容的问题，请先自己检查是否有其他的问题导致 解决：本文提供三种形式
1.将页面样式进行重写（不太推荐，如果是工具元素，可能会影响到其他页面） #wrapper #content-wrapper { overflow-x: visible !important; }2.在uefitor的（ueditor.all.js）全屏事件进行页面元素修改（记得做好备注，如果ueditor换版本，记得迁移代码） setViewportOffset:function (element, offset) { var left = parseInt(element.style.left) | 0; var top = parseInt(element.style.top) | 0; var rect = element.getBoundingClientRect(); var offsetLeft = offset.left - rect.left; var offsetTop = offset.top - rect.top; if (offsetLeft) { element.style.left = left + offsetLeft + 'px'; } if (offsetTop) { element.style.top = top + offsetTop + 'px'; } console.log('触发全屏事件') // 修改页面元素避免全屏模式下，部分内容被遮挡 $('#wrapper #content-wrapper').css('overflowX','visible'); },3.通过ueditor监听打开全屏前事件（推荐） let ueObject = UE.getEditor('textarea1',{ toolbars: [['insertimage', 'fullscreen']], initialFrameWidth: '100%', // 自适应窗口宽度 }); // 监听打开全屏前事件 ueObject.addListener('beforefullscreenchange',function(){ $('#wrapper #content-wrapper').css('overflowX','visible') }) |
【本文地址】
今日新闻 |
推荐新闻 |