TinyMCE一些问题

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-dialogtitle="提示":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>

4.富文本设置为只读模式,功能栏还可使用


disabledTinymce(){tinymce.activeEditor.getBody().setAttribute('contenteditable', false);//时富文本只读
}openTinymce(){tinymce.activeEditor.getBody().setAttribute('contenteditable', true);//取消时富文本只读
}

5.富文本去除style样式

<template><div><editorv-model="content":init="editorInit"/><button @click="getPlainText">Get Plain Text</button></div>
</template><script>
import { Editor } from '@tinymce/tinymce-vue'export default {components: {Editor},data() {return {content: '',  // This will hold the HTML content from TinyMCEeditorInit: {// Your TinyMCE configuration options}}},methods: {getPlainText() {// Convert HTML content to plain textconst plainText = this.stripHtml(this.content);console.log(plainText);// You can use the plain text as needed, e.g., save to server or show in UI},stripHtml(html) {// Create a temporary DOM element to use browser's built-in methodsconst tempDiv = document.createElement('div');tempDiv.innerHTML = html;return tempDiv.textContent || tempDiv.innerText || '';}}
}
</script><style scoped>
/* Add your styles here if needed */
</style>

getPlainText 方法
在上面的代码中，getPlainText 方法被用来将从TinyMCE编辑器中获取的HTML内容转换成纯文本。它利用了一个辅助函数 stripHtml，这个函数创建了一个临时的 div 元素，并将HTML内容设置为该 div 的 innerHTML。之后，利用 textContent 或 innerText 属性获取纯文本。
HTML到纯文本的转换
stripHtml 函数实现了HTML到纯文本的转换。使用浏览器的DOM API来提取文本是一个简单有效的方法，因为它能够自动处理HTML实体和多余的HTML标记。

TinyMCE一些问题

最新新闻

热搜词