最近接到一个富文本编辑协议的功能,最开始是使用的Quill插件,后面发现Quill对表格类的标签不太友好,就只有换掉Quill,由tinymce取而代之。
导读: 该组件功能是基于在表格里展示协议,并对协议内容进行编辑,在结束编辑后再次编辑将清除之前的历史记录
安装(使用的是vue3
)
yarn add "@tinymce/tinymce-vue@^5" // yarn
npm install "@tinymce/tinymce-vue@^5" // npm
清除撤销历史记录
let elem = tinymce.get(this.tinymceId) // this.tinymceId 为元素id名 不带#号
elem.undoManager.clear();
完整代码
<template>
<div class="app-container">
<textarea :id="`tinymce${selectRowIndex}`" v-model="tinymceHtml"></textarea>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/models/dom' // 特别注意 tinymce 6.0.0 版本之后必须引入,否则不显示
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
export default{
props:{
config: Object,
selectRowIndex: {
type: Number,
default: -1,
require: true,
},
editing: {
type: Boolean,
default: fals