layui 弹出层嵌入tinyMce的菜单被遮挡的解决办法

最新推荐文章于 2023-10-26 16:42:45 发布
最新推荐文章于 2023-10-26 16:42:45 发布
阅读量469 收藏
点赞数
文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45846592/article/details/129796657
版权
文章讲述了在使用layui时遇到弹出层被tinyMce编辑器遮挡的问题，常规解决方案无效。作者通过开发者工具发现设置.mce-panel的z-index为大于layui默认值19891022的值可以解决问题。这可能是由于tinyMce版本较老导致的。
摘要由CSDN通过智能技术生成

虽然都3202年了还在使用layui写后台是有点过时了，但是layui确实好用，在使用过程中也不可避免的碰到了如下图的问题

如图，本应该在弹出层上方出现的插入图片窗口被弹出层遮挡，查阅了其他同问题文章的解决方案无非是将.tox-tinymce-aux的z-index属性从默认的1300调整到19891014

或者直接去tinyMce的skin.min.css里修改z-index，我自己两种都尝试过，均无效

于是在此卡了很久，所以提供一个新的解决方法

首先按F12进入开发者模式，选取到该元素，发现有以下类名

 我挨个尝试过，发现如下属性这样设置有效，因为19891022是layui弹出层的默认堆叠，所以只需要对这个类名的z-index设置大于它19891022的值就行。

 .mce-panel {
            z-index: 19892413 !important;
        }

当然可能是因为我使用的tinyMce版本过老，才导致其他人的方法无效，所以写此文仅做纪念。

qq_45846592
关注
layui 富文本编辑器 tinymce
weixin_41865469的博客
10-26 533
关于介绍tinymce编辑器的文档并不多 发现上传后的图片改成了相对地址 …/…/…/uploads… convert_urls: false, 可以去掉自动转为相对地址
Layui+TinyMCE编辑回显第一次能回显,关闭弹出层后再次打开就不能编辑,富文本支持从word复制内容
lin_Lobster_的博客
07-05 1594
前端框架使用的layui,富文本用的tinymce,项目中是在弹出新增或者修改页面的时候,才打开的富文本,所以我的富文本要在打开layui弹出页面后再加载出来.之所以关闭弹出层在打开不能使用,或者打开显示的内容一样,是因为富文本的容器没有销毁.所以要在调用方法的时候销毁容器. 新增的方法里面: 修改的方法里面: 重点是后面的方法,我把调用富文本的方法封装起来了,调用方法前先销毁容器,再创建. /*tinymce富文本*/ function init_tiny_mce(content){
layui弹出层中嵌入tinymce时菜单被挡住了
ClearLoveQ的博客
05-24 808
解决办法： 将tinymce中的一个类修改层叠顺序 将.tox-tinymce-aux的z-index属性从默认的1300调整到19891014 这个19891014是layui弹出层的z-index值也是其作者的生日
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
amoureux555的博客
04-12 1918
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
解决layui弹窗下的下拉选择框被遮挡或显示不全问题
qq_46258819的博客
07-14 9000
在使用layui弹出层时，需要用到下拉框，但在选择时选项被遮挡出现滚动条从而不得不预留更大的空间。一开始以为是层级问题，但是无论怎么修改层级，问题都没有得到解决。 后来通过博客了解到layui样式设置的问题，在layui弹出层的内容区域中，设置了overflow:auto，使得内容超出后会自动出现滚动条。因此只要将overflow的值改成visible就行了。 直接修改layui-layer-content的样式，会发现根本不起作用，我们需要自定义layer皮肤来修改样式 在打开弹框时，为弹窗增加skin样
layuiadmin中使用tinymce富文本编辑器
陌小白的博客
03-19 2818
第一步，将tinymce文件放入layuiadmin 下 modules中 第二步，引入tinymce模块 layui.config({ base: '/pub/layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index', //主入口模块 tinymce: 'tinymce/tinymce', //tinymce模块 }).use(['form','jquery','index', 'cons
layui的富文本编辑器插件(tinymce)封装
10-02
在这个场景下，我们讨论的是Layui与tinymce的集成，tinymce是一款功能强大的富文本编辑器，被广泛应用于各种项目中。 tinymce的封装主要是为了在Layui框架内无缝使用，提供一个与Layui风格一致的编辑体验。以下是对...
layui-tinymce.zip
06-16
将layui与tinymce结合，可以构建出功能强大且界面美观的文本编辑功能。 在layui-tinymce.zip这个压缩包中，我们可以预见到其包含了将tinymce集成到layui框架中的相关文件和配置。这个组合可以帮助开发者在layui的...
layui 解决富文本框form表单提交为空的问题
10-16
// 基于layer弹出 layer.open({ type: 1, area: ['800px', '500px'], title: '编辑器', content: 'body', success: function(layero, index){ // 实例化 editor.render({ elem: '#id', // 对应的textarea...
使用layui-tinymce富文本编辑器报Uncaught TypeError: util.event is not a function
zxh7770的博客
12-28 3886
使用layui-tinymce富文本编辑器报Uncaught TypeError: util.event is not a function，下方截图所示 错误原因 1，在使用layui-tinymce富文本编辑器的时候在本地跑的好好的，在线上就获取不到富文本的内筒了。原因是layui.js无法获取到 util.event这个对象。按着下面的“解决方案”即可解决此问题。 错误代码如下： Unca...
layui弹出层下拉选择框被弹框遮挡解决办法
在原七海的博客
04-19 3294
layui弹出层中下拉选择框被弹框遮挡时，可在弹框success元素方法中，给弹出层添加 overflow:visible 样式即可解决。 $("#layer-layer").css("overflow","visible"); 弹框样例代码： layer.open({ id: 'layer-layer', btn: ['提交','关闭'], type: 1, title: '下拉选择弹框', content: $("#form-div"), area: [
ASP .NET MVC layui TinyMCE 富文本编辑器 上传图片到前台
Izrj的博客
11-21 475
ASP .NET MVC layui TinyMCE 富文本编辑器 上传图片到前台 根据自己的需求改动代码,这是转载记录 2022年11月21日22:02:45
解决Layui-layer弹出层中嵌入TinyMCE的菜单不显示的问题
Dexter's Laboratory
09-06 2261
在layui的layer弹出窗控件中嵌入了TinyMCE富文本编辑器后,点击顶部菜单不显示,可以看到是被layer的弹出层给挡住了,所以应该是layer的z-index属性比菜单层高导致. 经过一番定位,最终找到影响TinyMCE菜单层的z-index属性的类叫.tox-tinymce-aux,把它的z-index属性从默认的1300调整到19891015以上就可以解决问题啦! ps: layer弹出层的默认z-index是19891014,根据官方文档中的说明,这是layui作者闲心的生日????
tinymce富文本可编辑和不可编辑状态之遮盖层
qq_43777572的博客
10-19 233
tinymce富文本可编辑和不可编辑状态之遮盖层
layui 表格中嵌入下拉框被遮挡
望生帝的博客
04-25 1225
样式调整
layUI 下拉框遮挡
weixin_30414245的博客
08-02 1141
原项目中把layui内置的富文本编辑器替换成了百度的ueditor,但是出现了一点问题,下拉框被遮挡了! 在网上查询了一些方法,发现最简单的方法就是在当前页面的<head>标签中加入 <style> .layui-form-select dl { z-index: 9999; } &...
在el-dialog中使用tinymce 点击工具栏下拉框被遮挡
最新发布
qq_41910413的博客
10-26 1233
在el-dialog中使用tinymce控件时，会出现点击工具栏下拉框出现在弹窗下一层，审查元素之后发现是tinymce的下拉框z-index优先级低于el-dialog的z-index导致的，所以需要增加tinymce的下拉框的z-index值。
layui弹出层里使用TinyMCE富文本编辑器，并且回显数据案例
Fire_Sky_Ho的博客
02-03 5891
参考TinyMCE中文文档：http://tinymce.ax-z.cn/quick-start.php 先看下我要实现的功能 点击添加，弹出一个富文本编辑器，这个弹框有layer和TinyMCE组成 更新：回显内容 弹出层的页面的单独来一个，因为用的是iFrame 编辑页面，addOrUpdate.html，js代码 <script type="text/java...
layui遇到的弹出层被遮挡的问题
weixin_43846020的博客
07-02 2807
layui弹出层被遮挡的话 area: ['100%', '100%'], offset:['0px','0px']， <a href="javascript:;" onclick="editPassword();" data-title="修改密码" data-icon="fa fa-gears">修改密码</a>
tinymce layui
08-29
TinyMCE 和 layui 都是常见的前端开发工具，但它们的功能和用途不同。 TinyMCE 是一个富文本编辑器，通过它可以在网页中实现类似于 Word 文档的编辑功能，包括文本样式、字体、链接、图片等。它提供了丰富的 API 和插件，可以灵活地扩展和定制编辑器的功能。TinyMCE 可以用于构建博客编辑器、内容管理系统等需要富文本编辑功能的应用。 而 layui 是一套基于 jQuery 的前端 UI 框架，主要用于构建网页界面。它提供了丰富的组件和样式，包括表单元素、弹窗、表格等，可以快速地搭建出美观且功能完善的网页界面。layui 还提供了一套自定义的模块化开发方式，方便开发者根据需求选择性地加载和使用组件。layui 适用于快速构建各种类型的网页前端界面。 综上所述，TinyMCE 主要用于富文本编辑，而 layui 则用于构建前端界面。它们可以结合使用，例如在一个网页中使用 layui 搭建界面，然后通过 TinyMCE 实现对某个文本区域的富文本编辑功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值