TinyMce5富文本在Vue element UI的dialog中modal被遮挡的问题的两种解决办法

最新推荐文章于 2024-06-24 11:34:51 发布
最新推荐文章于 2024-06-24 11:34:51 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45770554/article/details/126526250
版权

1.首先是问题，如下图
在vue element中使用tinymce富文本编辑器，tinymce在dialog对话框中层级太低的问题
在这里插入图片描述
富文本嵌套在element UI的Dialog 对话框中会出现如上图情况，红框内的功能都无法使用。

解决办法
第一种，是将tinymce5导入到本地，然后在tinymce\skins\ui\oxide下面的skin.min.css文件，将里面的z-index统一后面加几个零（未试过，应该可行），不过有个问题就是不能使用cdn了。

第二种方法（正在使用）
首先找到组件的vue文件，然后重写element UI的Dialog 对话框CSS即可，简单粗暴。
在这里插入图片描述
结果如下
在这里插入图片描述
如果大家有更好的方法，欢迎评论区留言

�小鹏⁶⁸
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TinyMCE富文本在Vue element的dialog中(modal)插件被遮挡或者是组件下拉框层级显示不正确
qq_21991909的博客
06-18 1656
tinymec富文本封装自己的组件在dialog中调用时插件和按钮层级显示不正确的问题
Element-UI的dialog对话组件内的tinymce6弹窗被遮挡的解决办法及其它相关注意事项
暂时先用这个名字
01-21 2314
Element-UI的dialog对话组件内的tinymce弹窗被遮挡的解决办法，如何让tinymce使用中文解决办法。
vue 2.0项目中使用tinymce富文本框遇到的问题
最新发布
nanupup的博客
06-24 605
富文本编辑器tinymce
解决:Element Ui 的dailog中存在tinymce富文本编辑器时，tinymce弹窗图层在dialog下面问题
m0_63503465的博客
05-16 1083
解决dialog与tinymce图层问题
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
amoureux555的博客
04-12 1827
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
ElementUI中el-dialog嵌入tinycme引发的各类问题，遮挡等
huhui806的博客
07-03 1210
elementUI中el-dialog弹框中嵌入tinymcey引发的各类遮罩、显示等问题
TinyMce】element-plus的覆盖TinyMce通用解决方法&TinyMce被遮挡
tonysh_zds的博客
04-27 232
【代码】TinyMce】element-plus的覆盖TinyMce通用解决方法&TinyMce被遮挡。
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
vue+elementui+tinymce
03-27
弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key自增，实际富文本未被销毁，再次打开造成影响。可重写弹窗销毁策略。简单方法就添加v-if）
一款基于vue3+typescript+element plus的HTML5富文本编辑器.zip
02-13
标题中的“一款基于vue3+typescript+element plus的HTML5富文本编辑器”揭示了这个项目的核心技术栈，包括Vue.js的最新版本Vue 3、TypeScript以及Element Plus UI库。Vue 3是当前非常流行的前端框架，它提供了组件化...
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
vue项目使用element plus弹出窗配合富文本使用出现富文本显示不出来
一个努力不被优化的程序员
03-14 660
看引入的资源是否存在。
el-dialog弹出框被遮罩层覆盖的解决办法
博哥的二进制世界
01-05 2786
el-dialog弹出框被遮罩层覆盖的解决办法问题场景解决办法原理 问题场景 如下图所示,文案列表的dialog弹窗被遮罩层覆盖，但是遮罩层的z-index层级明显是比弹窗低的 解决办法 在el-dialog标签里添加:modal-append-to-body='false' <el-dialog title="文案列表" :visible.sync="isShowLabelBoundArticlesList" :modal-append-to-body='false'> &l
vue-property-decorator开发，子组件互相覆盖
qq_43218707的博客
08-18 189
检查每个子组件是否使用**@Component**命名，若是没有设置name，则会导致后面的子组件替换前面的，页面出现混乱。 import { Vue, Component } from ‘vue-property-decorator’ @Component({ name: ‘vueName’ })
Avue框架中avue-ueditor富文本编辑器连续使用下拉框被覆盖问题解决记录
Blood97的博客
01-20 865
修改avue-ueditor富文本层级问题
tinymce富文本可编辑和不可编辑状态之遮盖层
qq_43777572的博客
10-19 227
tinymce富文本可编辑和不可编辑状态之遮盖层
dialog 弹出框，遮罩层覆盖内容
AnlanJion的博客
08-16 2665
写完项目没太注意，并且情况是偶尔发生，点击dialog 的弹出框的时候，灰色遮罩层会覆盖内容上面， 这样的话可能是由于我们会发现浏览器遮罩层高于盒子遮罩层，会照成这样的问题，也有可能是我们给父元素加了定位元素 position|：fixed relative absolute 这样的话都可能会出现这样的问题， 解决方案，官网上也有，只不过可能没注意 那就是增加 <...
tinymce富文本编辑器【tip】
猿特佳
10-04 297
tinymce富文本编辑器在iview的modal框中显示的问题。
解决使用elementUI校验表单中使用验富文本编辑器内容的问题
qq_45532769的博客
10-30 2003
解决使用elementUI校验表单中使用验富文本编辑器内容的问题
tinymce富文本编辑器vue3项目中如何使用
05-23
在 Vue3 项目中使用 TinyMCE 富文本编辑器，可以按照以下步骤进行操作： 1. 安装 TinyMCE ```bash npm install tinymce ``` 2. 在 Vue3 中引入 TinyMCE 在 `main.js` 文件中添加以下代码： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值