TinyMCE一些问题

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

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

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

javascript 复制代码
/* 富文本菜单 */
.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 属性应用到非活动的内容上。

html 复制代码
<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

javascript 复制代码
//TinyMCE inde.vue文件
props: {
    editorDisabled:{
      type:Boolean,
      default:false
    }
  },
tinymce.init({
    selector: '#mytextarea',  // 初始化编辑器的textarea元素的选择器
    readonly: this.editorDisabled,//添加一个控制参数editorDisabled
    // ... 其他配置项
});
html 复制代码
//使用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.富文本设置为只读模式,功能栏还可使用

javascript 复制代码
disabledTinymce(){
	tinymce.activeEditor.getBody().setAttribute('contenteditable', false);//时富文本只读
}

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

5.富文本去除style样式

html 复制代码
<template>
  <div>
    <editor
      v-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 TinyMCE
      editorInit: {
        // Your TinyMCE configuration options
      }
    }
  },
  methods: {
    getPlainText() {
      // Convert HTML content to plain text
      const 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 methods
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = html;
      return tempDiv.textContent || tempDiv.innerText || '';
    }
  }
}
</script>

<style scoped>
/* Add your styles here if needed */
</style>
  1. getPlainText 方法

    在上面的代码中,getPlainText 方法被用来将从TinyMCE编辑器中获取的HTML内容转换成纯文本。它利用了一个辅助函数 stripHtml,这个函数创建了一个临时的 div 元素,并将HTML内容设置为该 div 的 innerHTML。之后,利用 textContent 或 innerText 属性获取纯文本。

  2. HTML到纯文本的转换

    stripHtml 函数实现了HTML到纯文本的转换。使用浏览器的DOM API来提取文本是一个简单有效的方法,因为它能够自动处理HTML实体和多余的HTML标记。

相关推荐
代码小学僧1 分钟前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
小高0071 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
东坡白菜1 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
小桥风满袖2 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
前端人类学2 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
CryptoRzz3 小时前
印度尼西亚股票数据API对接实现
javascript·后端
lecepin4 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
猩兵哥哥5 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
江城开朗的豌豆5 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
江城开朗的豌豆5 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js