UEditor 编辑器遮挡下拉列表等控件

☃ 背景

  • 今天在使用后台的 UEditor编辑器时,发现:因为上面的下拉选择框数据较多,而被编辑器遮挡,影响控件的使用
    UEditor 编辑器遮挡下拉列表等控件

当然这只是发现的一种情况,不排除会有其他控件受影响(比如:日期选择器

♨ 查找原因

  • 通过查看源码文件 ueditor.config.js,可以注意到下面这条注释掉的信息
    UEditor 编辑器遮挡下拉列表等控件

可以理解为,默认的源码设计,设置了z-index 为 900

  • 其中有篇文章 -【SELECT 下拉列表被遮挡 - Fly社区】中提到 只需打开这条注释即可,但是个人测试发现,不管打开还是设置其他数值(1000、-100)等依然无效

♨ 可行方案

  • 测试发现,可以在实例化编辑器时,补充一句:zIndex: "0" //加上这句设置层级关系
    UEditor 编辑器遮挡下拉列表等控件
  • 效果展示:
    UEditor 编辑器遮挡下拉列表等控件

附录:

可参考以前整理的UEditor使用文章: Laravel 框架集成 UEditor 编辑器的方法