解决Layui-layer弹出层中嵌入TinyMCE的菜单不显示的问题

最新推荐文章于 2024-07-28 20:44:38 发布
最新推荐文章于 2024-07-28 20:44:38 发布
阅读量2.2k 收藏 2
点赞数 3
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lpwmm/article/details/108430689
版权

在layui的layer弹出窗控件中嵌入了TinyMCE富文本编辑器后,点击顶部菜单不显示,可以看到是被layer的弹出层给挡住了,所以应该是layer的z-index属性比菜单层高导致.
在这里插入图片描述
经过一番定位,最终找到影响TinyMCE菜单层的z-index属性的类叫.tox-tinymce-aux,把它的z-index属性从默认的1300调整到19891015以上就可以解决问题啦!
在这里插入图片描述

ps: layer弹出层的默认z-index是19891014,根据官方文档中的说明,这是layui作者闲心的生日🤣
在这里插入图片描述

DexterLien
关注
专栏目录
layui的富文本编辑器插件(tinymce)封装
10-02
在layui-tinymce-master这个压缩包中，可能包含了tinymce的源码和配置文件。确保在HTML文件中正确引入tinymce的JS和CSS资源。 2. **初始化配置**：tinymce的使用通常需要进行初始化配置，包括设置语言、工具栏按钮...
Tinymce富文本编辑器在el-dialog中遮挡的问题
PinelliaLogic的博客
06-14 165
Tinymce富文本编辑器在el-dialog中遮挡的问题
浅谈layer.open的弹出层中的富文本编辑器为何不起作用！
sxs161028的博客
07-05 4975
很多童鞋都喜欢用贤心的layui框架。是的，我也喜欢用，方便，简单。但是呢，有时候项目中的需求会不一样，导致我们用的时候，显示效果可能会不一样，好吧。这样的话，个别遇到的问题总是解决不好，但是呢还是那句话，多研究一下，就都会有解决方法的。最近做的项目需求就是富文本编辑器要在弹出框中显示，好吧。本来以为可以没任何阻碍，后来发现编辑器在弹出框中总是不灵活，甚至图标都打不开。我想很多童鞋的写法是这样的：1
TinyMCE一些问题
最新发布
weixin_44289771的博客
07-28 470
由于 aria-hidden 属性在一个获得焦点的元素上被设置，违反了 WAI-ARIA 规范。这种情况通常会在包含 el-dialog 的弹出框或模态对话框中发生，因为这些组件通常会使用 aria-hidden 来隐藏非活动内容。这是避免 aria-hidden 引发的无障碍问题的推荐方法。1.element 在el-dialog中使用tinymce导致富文本弹窗在el-dialog后面的问题。当对话框关闭时，可以使用 aria-hidden 或 inert 来隐藏不可见的内容。
关于Tinymce组件工具栏展示位置问题
tangjunSino的博客
01-26 794
原因：因为页面内有个PageWrapper组件有滚动条导致了组件计算高度错误。现象：在使用Tinymce组件工具栏的时候发现下拉选项位置发生偏移。解决：确保高度计算正确。
解决tinymce在ElenentUI中使用z-index层级低，菜单不显示
WEB前端大咖
02-28 1495
解决tinymce在ElenentUI中使用z-index层级低，菜单不显示的问题
Vue 使用ele UI下拉框位置偏离 解决方法
weixin_48464087的博客
11-22 741
前端使用qiankun框架，在一个弹窗使用下拉框的时候，下拉框莫名其妙飞到左上角去了，而且点击不到 很奇怪，并报错：Error in event handler for “updatePopper “: “TypeError: Failed to execute...“
TinyMCE富文本在Vue element的dialog中(modal)插件被遮挡或者是组件下拉框层级显示不正确
qq_21991909的博客
06-18 1666
tinymec富文本封装自己的组件在dialog中调用时插件和按钮层级显示不正确的问题
解决:Element Ui 的dailog中存在tinymce富文本编辑器时，tinymce弹窗图层在dialog下面问题
m0_63503465的博客
05-16 1092
解决dialog与tinymce图层问题
layui-tinymce.zip
06-16
将layui与tinymce结合，可以构建出功能强大且界面美观的文本编辑功能。 在layui-tinymce.zip这个压缩包中，我们可以预见到其包含了将tinymce集成到layui框架中的相关文件和配置。这个组合可以帮助开发者在layui的...
tinymce-formatpainter-skwang:适用于tinymce的免费formatpainter插件
03-04
tinymce-formatpainter-skwang 描述 适用于tinymce的免费formatpainter（格式刷）插件 用法 tinymce . init ( { selector : '#tinymce' , plugins : [ 'formatpainter' ] , toolbar : "formatpainter" , } ) ;
tinymce-emoji：一个简单的tinymce插件，用于添加本地表情符号对话框
02-05
tinymce-emoji 这个简单的tinymce插件添加了一个帮助程序对话框，可将本地表情符号插入到您的内容中。 所有表情符号均已从提供的中删除 用法 通过npm安装： npm install --save tinymce-emoji 添加到您的tinymce ...
tinymce-中文包
05-27
tinymce-中文包
在el-dialog中使用tinymce 点击工具栏下拉框被遮挡
qq_41910413的博客
10-26 1194
在el-dialog中使用tinymce控件时，会出现点击工具栏下拉框出现在弹窗下一层，审查元素之后发现是tinymce的下拉框z-index优先级低于el-dialog的z-index导致的，所以需要增加tinymce的下拉框的z-index值。
解决vue中使用tinymce在dialog对话框中层级低
baidu_41682543的博客
07-15 3462
1.安装：npm install tinymce -S tinymce默认英文界面，下载一个中文语言包zh_CN.js（https://www.tiny.cloud/get-tiny/language-packages/） 文档地址：http://tinymce.ax-z.cn/ 2.把node_modules/tinynce里面的文件复制到static文件夹下 3.main.js中引入tinymce Editor.vue <templat...
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
amoureux555的博客
04-12 1866
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
Vue 踩坑 tinycme富文本组件在dialog弹窗中的问题解决
Software As Business
07-17 4672
tinycme富文本组件在dialog弹窗中的问题应用场景问题和解决方案1.第二次打开弹窗时，富文本组件中的内容为空原因：此处就不贴图了，原因是在第二次dialog弹窗时，第一次弹窗的tinycme组件未销毁，因此先于第二次dialog出现，而第二次dialog中的传值也就后于富文本组件初始化，也就未被渲染了。解决方案：我的解决方案如下代码，只要保证富文本后于dialog初始化就行了，因此在富文本组件上添加 v-if即可简单解决2.弹窗中的富文本组件的工具栏点击无响应，具体如图原因：tinycme和dial
tinymce（富文本）在vue中使用的时候，图标点击失效
qq_46119030的博客
08-17 1459
我开始用的 append-to-body 不行 ，后面改成了 modal-append-to-body，就可以了，当然我看网上没有出现过这种问题，有可能是因为elmentui，vue 和 tinymce 的版本问题。在一次使用的时候，发现富文本编辑器，图标能显示出来，但是点击没有效果，控制台也没有报错，非常奇怪。我的富文本是放在一个 dialog 弹窗上边，而弹窗是要写。经过一个单词一个单词的删除尝试，才发现问题出在遮罩层上面。希望此文章能帮助你( * ^ ▽ ^ * )网上也没有看到和我一样的问题。...
Vue弹框中使用tinymce只有第一次可使用，后续就获取不到光标，只有刷新后才能再次使用
qq_41154522的博客
08-04 2188
原因：在弹框出现之前tinymce就创建了 解决 在tinymce编辑器外层加v-if<div class="ruleDiv" v-if="editversion"> <editor v-model="myValue" :init="init" :disabled="false"></editor> </div> 在弹框version设置为true后，设置editversion为truethis.$nextTick(() => { th.
怎么解决layui-tinymce富文本编辑器在关闭了窗口后还是有残留
06-11
你好，针对layui-tinymce富文本编辑器在关闭了窗口后还是有残留的问题，可以尝试以下几种解决方法： 1. 在关闭窗口之前，手动将富文本编辑器内容清空，例如使用以下代码： tinyMCE.get('editor_id').setContent('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DexterLien

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值