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

已于 2024-06-27 17:29:16 修改
阅读量331 收藏 1
点赞数 1
文章标签： vue.js javascript elementui
于 2024-06-27 17:27:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26996817/article/details/140019279
版权

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

原因是富文本的弹窗层级太低了

在APP.vue中添加样式即可解决

/* 富文本菜单 */
.tox-tinymce-aux {
  z-index: 9999 !important;
}

在这里插入图片描述

诸葛亮写代码
关注
tinymce移动端使用_一招解决Tinymce在el-dialog中下拉框使用异常
weixin_39791653的博客
11-21 2549
前言：在项目开发维护过程中，由于需要富文本编辑器，经过对比wangEidtor、quill等多个富文本编辑器，发现TinyMce富文本编辑器是最合适的，使用体验也是最好的；而且支持移动端的使用，支持响应式布局。所以我在EuiAdmin开源项目中集成了Tinymce富文本编辑器。经过基本的配置，满足基础使用、且支持axios上传图片。但是还是存在一个问题，那就是当Tinymce富文本编辑器在elem...
富文本组件 Tinymce Vue组件
03-08
element admin 集成的 可以直接使用，依赖的话自己看着安装 使用教程：https://blog.csdn.net/qq_31754591/article/details/123301574
解决:Element Ui 的dailog中存在tinymce富文本编辑器时，tinymce弹窗图层在dialog下面问题
m0_63503465的博客
05-16 1108
解决dialog与tinymce图层问题
TinyMCE一些问题
最新发布
weixin_44289771的博客
07-28 508
由于 aria-hidden 属性在一个获得焦点的元素上被设置，违反了 WAI-ARIA 规范。这种情况通常会在包含 el-dialog 的弹出框或模态对话框中发生，因为这些组件通常会使用 aria-hidden 来隐藏非活动内容。这是避免 aria-hidden 引发的无障碍问题的推荐方法。1.element 在el-dialog中使用tinymce导致富文本弹窗在el-dialog后面的问题。当对话框关闭时，可以使用 aria-hidden 或 inert 来隐藏不可见的内容。
dialog中使用Tinymce 编辑器，有时会无法回显内容
zsx1799268625的博客
04-26 538
这里可以给富文本组件也绑定一个。，用于控制文本渲染与销毁。
element-ui + el-dialog + Vue.component 注册的tinymce富文本控件 第二次及以后打开dialog出现问题解决方法
hijk7的博客
04-23 465
element-ui + el-dialog + Vue.component 注册的tinymce富文本控件 第二次及以后打开dialog出现问题解决方法
解决wangeditor富文本编辑器在element-ui el-dialog不显示问题
smileNano的博客
05-31 2618
1、在el-dialog里添加@opened=""与 @closed="" <el-dialog title="文章发布" :visible.sync="dialogFormVisible" @opened="show()" @closed="hide()" :before-close="handleClose"> <el-form :model="form"> <el-form-item label="内容详情：...
Element-UI的dialog对话组件内的tinymce6弹窗被遮挡的解决办法及其它相关注意事项
暂时先用这个名字
01-21 2346
Element-UI的dialog对话组件内的tinymce弹窗被遮挡的解决办法，如何让tinymce使用中文解决办法。
在el-dialog中使用tinymce 点击工具栏下拉框被遮挡
qq_41910413的博客
10-26 1225
在el-dialog中使用tinymce控件时，会出现点击工具栏下拉框出现在弹窗下一层，审查元素之后发现是tinymce的下拉框z-index优先级低于el-dialog的z-index导致的，所以需要增加tinymce的下拉框的z-index值。
Tinymce富文本编辑器在el-dialog中遮挡的问题
PinelliaLogic的博客
06-14 174
Tinymce富文本编辑器在el-dialog中遮挡的问题
ElementUI中el-dialog嵌入tinycme引发的各类问题，遮挡等
huhui806的博客
07-03 1245
elementUI中el-dialog弹框中嵌入tinymcey引发的各类遮罩、显示等问题
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key自增，实际富文本未被销毁，再次打开造成影响。可重写弹窗销毁策略。简单方法就添加v-if）
el-dialog 层级问题混乱
天命爱心职责的博客
07-04 1438
使用 element -UI 的弹窗时，一般来说弹窗的层级应该比较高，背景置灰。但是有时候控制台的z-index层级混乱，弹框并没有置顶。
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
amoureux555的博客
04-12 1915
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
TinyMCE 富文本编辑器 ━━ 自定义插件之弹窗控件布局
暂时先用这个名字
09-25 3369
一键排版插件已经开发完毕，起初所有的控件全都显示在一列，没有分类，看着实在别扭，功能多了就像iphone一样越来越长~~~~现在总算是结束了，整理总结一下。 弹窗最普通的布局 editor.windowManager.open({ title: "Typeset", body:[{ type: 'checkbox', name: 'clean_a', l...
vue-element-admin使用Tinymce富文本插件的踩坑填坑
Queen-Shir的博客
07-29 6885
vue-element-admin项目的作者已经封装好了Tinymce富文本组件，我直接在Git上下载demo运用到自己项目里。 这是Git地址：https://github.com/PanJiaChen/vue-element-admin 一、Bug描述： （组件的代码和demo基本一致的前提下）我在编辑弹窗里引用了Tinymce富文本组件，如下图，table的每条数据都有一个“修改”按钮，每次点击“修改”按钮，则弹窗里显示该行对应的HTML。可是从第二次开始每次富文的内容都和第一次的一样，按道理不
vue2+element 集成Tinymce
qq_38388578的博客
02-19 2082
1、安装 cnpm i @tinymce/tinymce-vue tinymce --save 修改版本重装 "@tinymce/tinymce-vue": "^3.2.8", "tinymce": "^5.4.1", 2、封装Editor.vue组件 <template> <div class="tinymce-editor"> <editor v-model="myValue" :init="init" ...
Element-UI中调用tinymce6实现本地化加载，并解决提示：This domain is not registered with TinyMCE Cloud，省去api-key
暂时先用这个名字
02-01 8363
最新的tinymce会提示”This domain is not registered with TinyMCE Cloud“，意思就是要求注册tinymce官方云才能下载所需组件类库。既然这样，那么解决办法就简单了，要么去注册云，要么屏蔽掉提示~~，要么全部由本地加载。网上大部分文章都没有细化其实现，希望本文看完你就能完全领会tinymce6的开发了。
vue中在el-dialog中再打开一个el-dialog
06-02
在Vue中，在el-dialog中再打开一个el-dialog可以通过嵌套组件的方式来实现。 具体实现方法如下： 1. 创建一个弹窗组件，例如MyDialog，用于显示一个el-dialog。 2. 在MyDialog组件中，添加一个插槽用于显示弹窗内容，并在插槽中使用el-dialog组件来实现弹窗的显示和隐藏。 例如，在MyDialog组件中实现一个弹窗： ``` <template> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="onClose"> <slot></slot> <el-dialog v-if="showChildDialog" :visible.sync="childDialogVisible" @close="onChildDialogClose"> <div>子弹窗内容</div> </el-dialog> </el-dialog> </template> <script> export default { props: { dialogTitle: String }, data() { return { dialogVisible: true, showChildDialog: false, childDialogVisible: false } }, methods: { onClose() { this.$emit('close'); }, onChildDialogClose() { this.showChildDialog = false; } } } </script> ``` 在上面的代码中，使用了el-dialog组件来实现弹窗的显示和隐藏，同时添加了一个插槽用于显示弹窗内容。在插槽中，再次使用el-dialog组件来实现子弹窗的显示和隐藏。 3. 在需要打开弹窗的地方，引入MyDialog组件，并通过v-if或v-show指令来控制弹窗的显示和隐藏。 例如，在父组件中引入MyDialog组件并打开弹窗： ``` <template> <div> <button @click="showDialog = true">打开弹窗</button> <my-dialog v-if="showDialog" :dialogTitle="dialogTitle" @close="showDialog = false"> <div> 弹窗内容 <button @click="showChildDialog = true">打开子弹窗</button> </div> </my-dialog> </div> </template> <script> import MyDialog from './MyDialog.vue' export default { components: { MyDialog }, data() { return { showDialog: false, dialogTitle: '弹窗标题' } } } </script> ``` 在上面的代码中，通过v-if指令来控制弹窗的显示和隐藏，使用了MyDialog组件，并传递了相应的props和事件。 通过以上步骤，就可以在一个el-dialog中再打开一个el-dialog了。注意，在嵌套的el-dialog中，需要使用v-if或v-show指令来控制显示和隐藏，并在组件中添加相应的事件来关闭弹窗。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值