1.element 在el-dialog中使用tinymce导致富文本弹窗在el-dialog后面的问题
原因是富文本的弹窗层级太低了
在APP.vue中添加样式即可解决
/* 富文本菜单 */
.tox-tinymce-aux {
z-index: 9999 !important;
}
2.element 在el-dialog中点击富文本的功能栏报错
由于 aria-hidden 属性在一个获得焦点的元素上被设置,违反了 WAI-ARIA 规范。这种情况通常会在包含 el-dialog 的弹出框或模态对话框中发生,因为这些组件通常会使用 aria-hidden 来隐藏非活动内容。
为了修复这个问题,可以使用 inert 属性替代 aria-hidden。inert 属性不仅会隐藏元素,还会阻止它们获得焦点和用户的交互。这是避免 aria-hidden 引发的无障碍问题的推荐方法。
解决方案
确保对话框关闭时设置 aria-hidden 或 inert:
当对话框关闭时,可以使用 aria-hidden 或 inert 来隐藏不可见的内容。
使用 inert 替代 aria-hidden:
你可以通过 JavaScript 动态地将 inert 属性应用到非活动的内容上。
<template>
<div>
<el-button @click="dialogVisible = true">打开富文本</el-button>
<div ref="chart" style="width: 600px; height: 400px"></div>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="70%"
@open="onDialogOpen"
@close="onDialogClose"
>
<new05></new05>
</el-dialog>
<div id="mainContent">
<p>This is the main content.</p>
</div>
</div>
</template>
<script>
methods: {
onDialogOpen() {
document.getElementById("mainContent").setAttribute("inert", "true");
},
onDialogClose() {
document.getElementById("mainContent").removeAttribute("inert");
},
}
</script>
3.给TinyMCE添加disabled
//TinyMCE inde.vue文件
props: {
editorDisabled:{
type:Boolean,
default:false
}
},
tinymce.init({
selector: '#mytextarea', // 初始化编辑器的textarea元素的选择器
readonly: this.editorDisabled,//添加一个控制参数editorDisabled
// ... 其他配置项
});
//使用TinyMCE的页面
<template>
<div>
<tinymce :editorDisabled="formData.editorDisabled" :height="200"></tinymce>
</div>
</template>
<script>
import tinymce from "./Tinymce/index.vue";
export default {
components: {
tinymce,
},
data(){
return{
formData:{
editorDisabled:true
}
}
},
};
</script>
<style>
</style>