TinyMCE富文本在Vue element的dialog中(modal)插件被遮挡或者是组件下拉框层级显示不正确

最新推荐文章于 2024-07-24 11:11:41 发布
最新推荐文章于 2024-07-24 11:11:41 发布
阅读量1.5k 收藏 4
点赞数 2
文章标签： vue.js javascript 前端 前端框架 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21991909/article/details/125344829
版权

TinyMCE富文本在Vue element的dialog中(modal)被遮挡或者是组件下拉框层级显示不正确

提示：先来一张异常图

工具栏的下拉框总是显示异常，在dialog里面层级显示不正确
在这里插入图片描述—

解决办法

借鉴

https://blog.csdn.net/weixin_44526306/article/details/108005906：

总结

一、方法一

找到TinyMce文本框的css样式文件,
在这里插入图片描述
skin.css下的skin.css.min,找到样式名称.tox-tinymce-aux，修改 z-index: 5000 !important;
在这里插入图片描述
在这里插入图片描述
刷新页面得到效果

最低0.47元/天 解锁文章
qq_21991909
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
tinymce移动端使用_一招解决Tinymce在el-dialog中下拉框使用异常
weixin_39791653的博客
11-21 2490
前言：在项目开发维护过程中，由于需要富文本编辑器，经过对比wangEidtor、quill等多个富文本编辑器，发现TinyMce富文本编辑器是最合适的，使用体验也是最好的；而且支持移动端的使用，支持响应式布局。所以我在EuiAdmin开源项目中集成了Tinymce富文本编辑器。经过基本的配置，满足基础使用、且支持axios上传图片。但是还是存在一个问题，那就是当Tinymce富文本编辑器在elem...
解决tinymce在ElenentUI中使用z-index层级低，菜单不显示
WEB前端大咖
02-28 1293
解决tinymce在ElenentUI中使用z-index层级低，菜单不显示的问题
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
amoureux555的博客
04-12 1690
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
详细讲解Element UI 中丰富的表单控件（图文解析）
码农研究僧的博客
06-12 2040
Element UI 创建各种表单控件，包括文本框、文本域、下拉框、单选框、复选框、日期控件、图片上传、文件上传和富文本控件
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key自增，实际富文本未被销毁，再次打开造成影响。可重写弹窗销毁策略。简单方法就添加v-if）
Vue 使用ele UI下拉框位置偏离 解决方法
weixin_48464087的博客
11-22 674
前端使用qiankun框架，在一个弹窗使用下拉框的时候，下拉框莫名其妙飞到左上角去了，而且点击不到 很奇怪，并报错：Error in event handler for “updatePopper “: “TypeError: Failed to execute...“
layui 弹出层嵌入tinyMce的菜单被遮挡的解决办法
qq_45846592的博客
03-27 404
我挨个尝试过，发现如下属性这样设置有效，因为19891022是layui弹出层的默认堆叠，所以只需要对这个类名的z-index设置大于它19891022的值就行。虽然都3202年了还在使用layui写后台是有点过时了，但是layui确实好用，在使用过程中也不可避免的碰到了如下图的问题。如图，本应该在弹出层上方出现的插入图片窗口被弹出层遮挡，查阅了其他同问题文章的解决方案无非是将。当然可能是因为我使用的tinyMce版本过老，才导致其他人的方法无效，所以写此文仅做纪念。
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
tinymce 富文本组件
05-17
1. **安装插件**：在Vue项目中使用TinyMCE，首先需要通过npm或yarn安装tinymce-vue这个官方提供的Vue组件库。运行如下命令： ``` npm install tinymce tinymce-vue --save ``` 2. **引入组件**：在Vue组件中，...
在vue中使用tinymce富文本编辑器
09-18
在Vue项目中集成TinyMCE富文本编辑器是一项常见的需求，尤其对于需要用户输入大量文本内容的应用来说。TinyMCE是一款强大的开源富文本编辑器，它提供了丰富的功能，如字体样式调整、插入图片、创建表格等，使得内容...
tinymce 富文本编辑器导出插件
11-01
tinymce 富文本编辑器导出插件， 支持导出word 导出pdf,可通过配置修改下载文件名称
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
tinymce的编辑栏层级问题
weixin_45924425的博客
02-10 944
当在 dialog 里面使用 tinymce 的时候，编辑栏的层级会比 dialog 低，而造成编辑栏的选项在 dialog 的后边，甚至发生偏移等问题。
关于Tinymce组件工具栏展示位置问题
tangjunSino的博客
01-26 701
原因：因为页面内有个PageWrapper组件有滚动条导致了组件计算高度错误。现象：在使用Tinymce组件工具栏的时候发现下拉选项位置发生偏移。解决：确保高度计算正确。
Vue 踩坑 tinycme富文本组件在dialog弹窗中的问题解决
Software As Business
07-17 4259
tinycme富文本组件在dialog弹窗中的问题应用场景问题和解决方案1.第二次打开弹窗时，富文本组件中的内容为空原因：此处就不贴图了，原因是在第二次dialog弹窗时，第一次弹窗的tinycme组件未销毁，因此先于第二次dialog出现，而第二次dialog中的传值也就后于富文本组件初始化，也就未被渲染了。解决方案：我的解决方案如下代码，只要保证富文本后于dialog初始化就行了，因此在富文本组件上添加 v-if即可简单解决2.弹窗中的富文本组件的工具栏点击无响应，具体如图原因：tinycme和dial
解决Layui-layer弹出层中嵌入TinyMCE的菜单不显示的问题
Dexter's Laboratory
09-06 2211
在layui的layer弹出窗控件中嵌入了TinyMCE富文本编辑器后,点击顶部菜单不显示,可以看到是被layer的弹出层给挡住了,所以应该是layer的z-index属性比菜单层高导致. 经过一番定位,最终找到影响TinyMCE菜单层的z-index属性的类叫.tox-tinymce-aux,把它的z-index属性从默认的1300调整到19891015以上就可以解决问题啦! ps: layer弹出层的默认z-index是19891014,根据官方文档中的说明,这是layui作者闲心的生日????
详解Vue中nextTick的原理与作用
最新发布
fengjing81的专栏
07-24 653
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue 富文本插件 tinymce不显示
05-20
可能是因为 tinymce 插件的初始化有问题，你可以尝试以下步骤： 1. 确认你已经正确引入了 tinymce 的 js 和 css 文件。 2. 在 Vue 组件的 mounted 钩子函数中，调用 tinymce 的初始化方法。例如： ``` mounted() { tinymce.init({ selector: '#editor', plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak', toolbar_mode: 'floating', height: 500, setup: editor => { this.editor = editor; editor.on('keyup', () => { this.$emit('input', editor.getContent()); }); }, }); }, ``` 3. 确认你的模板中有一个 id 为 editor 的元素，用于显示富文本编辑器。例如： ``` <template> <div> <textarea id="editor">{{ value }}</textarea> </div> </template> ``` 如果以上方法仍然无法解决问题，你可以查看浏览器的控制台输出，看是否有相关的错误信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值