在el-dialog中使用tinymce 点击工具栏下拉框被遮挡

最新推荐文章于 2024-06-27 17:27:55 发布

初心w50t2

最新推荐文章于 2024-06-27 17:27:55 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue.js 前端 tinymce

本文链接：https://blog.csdn.net/qq_41910413/article/details/134059542

VUE 专栏收录该内容

31 篇文章

订阅专栏

在el-dialog中使用tinymce控件时，会出现点击工具栏下拉框出现在弹窗下一层，审查元素之后发现是tinymce的下拉框z-index优先级低于el-dialog的z-index导致的，所以需要增加tinymce的下拉框的z-index值。

在这里插入图片描述

通过审查元素得到，需要修改tox-tinymce-aux元素的优先级：

<style lang="scss">
/* 在el-dialog中使用tinymce  z-index被遮挡 */
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>

这样就可以了：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

初心w50t2

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Vue笔记】基于vue3 + element-plus + el-dialog封装一个自定义的dialog弹出窗口组件

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。

11-19

1527

v-model模式下，默认的属性名称是【modelValue】，可以省略不写，这种方式下，只需要在使用组件的时候，直接写【v-model】就可以实现数据的双向绑定。如果你想自定义属性名称，那么你就必须使用【v-model:属性名称】的格式来进行数据的双向绑定，这种模式下，必须指定属性名称，要和子组件中的props属性名称相同，另外emits发送事件的时候，也要使用【emits("update:属性名称")】这种格式，这样才可以完成数据的双向绑定。

#11vue3中使用el-dialog展示与关闭交由父组件控制的写法

weixin_42718399的博客

02-18

2106

vue3中使用elementplus的el-dialog展示与关闭交由父组件控制的写法，分两种方法，使用difineExpose或者defineEmits实现

参与评论您还未登录，请先登录后发表或查看评论

ElementUI中el-dialog嵌入tinycme引发的各类问题，遮挡等

huhui806的博客

07-03

1538

elementUI中el-dialog弹框中嵌入tinymcey引发的各类遮罩、显示等问题

tinymce移动端使用_一招解决Tinymce在el-dialog中下拉框使用异常

weixin_39791653的博客

11-21

2678

前言：在项目开发维护过程中，由于需要富文本编辑器，经过对比wangEidtor、quill等多个富文本编辑器，发现TinyMce富文本编辑器是最合适的，使用体验也是最好的；而且支持移动端的使用，支持响应式布局。所以我在EuiAdmin开源项目中集成了Tinymce富文本编辑器。经过基本的配置，满足基础使用、且支持axios上传图片。但是还是存在一个问题，那就是当Tinymce富文本编辑器在elem...

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

qq_21991909的博客

06-18

2012

tinymec富文本封装自己的组件在dialog中调用时插件和按钮层级显示不正确的问题

Element-UI的dialog对话组件内的tinymce6弹窗被遮挡的解决办法及其它相关注意事项

暂时先用这个名字

01-21

2605

Element-UI的dialog对话组件内的tinymce弹窗被遮挡的解决办法，如何让tinymce使用中文解决办法。

element 在el-dialog中使用tinymce导致富文本弹窗在el-dialog后的问题

最新发布

qq_630354780的博客

06-27

509

element 在el-dialog中使用tinymce导致富文本弹窗在el-dialog后的问题。在APP.vue中添加样式即可解决。原因是富文本的弹窗层级太低了。

解决:Element Ui 的dailog中存在tinymce富文本编辑器时，tinymce弹窗图层在dialog下面问题

m0_63503465的博客

05-16

1300

解决dialog与tinymce图层问题

使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中

qq_48651377的博客

05-11

2099

定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，

ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭

weixin_41697323的博客

12-03

5282

需求描述今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。弹窗关闭后还显示一层遮罩层，设置append-to-body即可问题分析之所以会产生这种问题，是因为elementUi在...

vue2中使用tinymce

wch19960518的博客

06-03

1418

，下载完成后将解压后的文件夹存放在与skins文件夹相同的位置。（我这里在最外层包裹了tinymce这一层文件夹方便查找，可不包）（2）监听删除操作，对有data-protected属性和data-mce-bogus属性的内容不可删除。需要汉化的可以在官网下载语言包（执行完上面的两条命令后，在node_modules 中找到。（4）【内容】编辑器模板中table样式修改。（2）【编辑】时某些内容是不可编辑的。（3）【内容】前端拼接编辑器模板。文件夹，将tinymce目录中的。（1）【查看】时禁用编辑。

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

qq_45846592的博客

03-27

589

我挨个尝试过，发现如下属性这样设置有效，因为19891022是layui弹出层的默认堆叠，所以只需要对这个类名的z-index设置大于它19891022的值就行。虽然都3202年了还在使用layui写后台是有点过时了，但是layui确实好用，在使用过程中也不可避免的碰到了如下图的问题。如图，本应该在弹出层上方出现的插入图片窗口被弹出层遮挡，查阅了其他同问题文章的解决方案无非是将。当然可能是因为我使用的tinyMce版本过老，才导致其他人的方法无效，所以写此文仅做纪念。

tinyMCE 封装后重复调用工具栏不显示

weixin_55701505的博客

08-03

976

只要把这个属性改为false 或者删掉就可以，就算没有指定属性，同样带有粘滞效果。当第二次使用时工具栏就不见了，起初还以为是 id 的问题。最后发现是它的一个粘滞工具栏属性带来的问题。动态创建 tinyMCE。

在vue element中使用tinymce富文本编辑器，解决tinymce在dialog对话框中层级太低的问题

钓瞄的鱼的博客

04-22

2119

在vue element中使用tinymce富文本编辑器，解决tinymce在dialog对话框中层级太低的问题问题解决方案结果各国语言包下载地址index.vue代码源代码地址问题更新tinymce版本导致解决方案 1.在当前项目的node_modules 中复制 tinymce 2. 粘贴到pubilc目录下 3.方法很简单，找到项目public\tinymce\skins\ui\oxide下面的skin.min.css文件，将里面的z-index统一后面加五个零注意 min.cs

Vue项目中ElementUi的el-dialog弹出框被遮盖层挡住

一个努力学习的程序猿

07-02

3298

问题如下：在使用el-dialog时，会自带有遮盖层，此时可能会出现弹出框被遮盖层挡住的情况。解决方案如下：在el-dialog标签里添加 :modal-append-to-body=‘false’。问题解决。

【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留

fruge365的博客

04-12

2582

【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留

解决vue中使用tinymce在dialog对话框中层级低

baidu_41682543的博客

07-15

3814

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...

tinymce 工具栏 不显示_winform中MenuStrip主菜单、工具栏、状态栏、托盘、其他控件...

weixin_39657662的博客

12-12

611

MenuStrip主菜单如果要写某个菜单的事件就双击那个菜单即可。设置热键符号要加上&这个符号，快捷键shortcutkeys选择快捷键，快速选择菜单可以插入标准项，主菜单和工具栏都有这个快捷方式。ContectMenuStrip上下文菜单就是在空白处右击跳出来的菜单，如果要设置对某个控件生效，就在那个控件的属性找到ContectMenuStrip，选择设置的...

Tinymce富文本编辑器在el-dialog中遮挡的问题

PinelliaLogic的博客

06-14

246

Tinymce富文本编辑器在el-dialog中遮挡的问题

vue富文本编辑器tinymce弹窗关闭时清空

03-29

可以在tinymce的初始化设置中添加一个关闭事件的回调函数，然后在该函数中清空编辑器内容。示例代码： ``` tinymce.init({ selector: 'textarea', // 其他初始化设置 setup: function (editor) { editor.on('close', function () { editor.setContent(''); }); } }); ``` 在上面的代码中，我们添加了一个名为`close`的事件监听器，当编辑器关闭时，该监听器会被触发，并执行回调函数。在回调函数中，我们使用`setContent('')`方法清空编辑器的内容。