目前项目比较老，用的还是wangEditor v3版本，不满足现在的需求，v5版本又不支持，所以，选择使用tinymce来替换
目前项目使用的tinymce版本：
npm i tinymce@5.10.9 -S
npm i @tinymce/tinymce-vue@3.0.1 -S
安装成功，需要node_moudles中找到tinymce文件，将skin文件复制出来，放到本地项目assets下，为了替换汉化语言包。
node_moudles 中找到tinymce文件夹
image.png
放到项目中src/assets/tinymce
image.png
zh_CN.js需要网上下载，language-packages
代码部分：
components/tinymce/index.js
<!-- tinymc富文本 -->
<template>
<div>
<editor
v-model="myValue"
:init="init"
:disabled="disabled"
@onClick="onClick"
/>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import '@/assets/tinymce/skins/ui/oxide/skin.css'
import '@/assets/tinymce/langs/zh_CN'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
// 下面这些引入路径中带plugins的都是引入安装的依赖包里面的插件;
// 如果你想使用和展示该插件功能，就要先引入
// import "tinymce/plugins/image"; // 项目不需要图片上传
// import 'tinymce/plugins/media' // 项目不需要多媒体上传
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/print'
import 'tinymce/icons/default' // 图标 -解决测试环境找不icon问题
import { FontFormats } from './font'
export default {
components: {
Editor
},
props: {
// 传入一个value，使组件支持v-model绑定
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
width: {
type: Number,
default: 300
},
height: {
type: Number,
default: 200
},
plugins: {
type: [String, Array],
default:
'lists table wordcount preview fullscreen print hr'
}
},
data() {
return {
// 初始化配置
init: {
selector: 'textarea',
font_formats: FontFormats,
// skin: false,
language_url: '@/assets//tinymce/langs/zh_CN.js',
skin_url: '@/assets//tinymce/skins/ui/oxide',
content_css: '@/assets//tinymce/skins/content/default/content.css',
language: 'zh_CN',
height: this.height,
width: this.width,
plugins: this.plugins,
// toolbar1 toolbar2 工具栏换行显示
toolbar1: 'undo redo | fontsizeselect formatselect | bold italic underline | forecolor backcolor |',
toolbar2: 'alignleft aligncenter alignright alignjustify | removeformat hr | bullist numlist outdent indent | importword lists table | preview fullscreen |',
branding: true,
menubar: true,
// 设置默认展示的字体和字号
setup: function(editor) {
editor.on('init', function(ed) {
this.getBody().style.fontSize = '14pt'
this.getBody().style.fontFamily = '微软雅黑'
})
},
resize: true
},
myValue: this.value
}
},
watch: {
value(newValue) {
this.myValue = newValue
},
myValue(newValue) {
this.$emit('input', newValue)
}
},
mounted() {
tinymce.init({})
},
methods: {
onClick(e) {
this.$emit('tinymceClick', this.myValue)
},
clear() {
this.myValue = ''
}
}
}
</script>
<style scoped></style>
字体库，目前只是截取了一部分，
src/components/tinymce/font.js
export const FontFormats = '宋体=SimSun,SimHei,serif;黑体=SimHei,Heiti TC,sans-serif;楷体=KaiTi,KaiTi_GB2312,serif;仿宋=FangSong,FangSong_GB2312,serif;微软雅黑=Microsoft YaHei,sans-serif;新宋体=NSimSun,serif;细明体=MingLiU,serif;新细明体=PMingLiU,serif;标楷体=DFKai-SB,serif;华文楷体=STKaiti,serif;华文宋体=STSong,serif;华文中宋=STZhongsong,serif;华文仿宋=STFangsong,serif;华文彩云=STCaiyun,serif;华文琥珀=STHupo,serif;华文隶书=STLiti,serif;华文行楷=STXingkai,serif;华文新魏=STXinwei,serif;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;'
使用：
<template>
...
<Tinymce v-model="mailForm.contents" :width="604" :height="500" @tinymceClick="changeEditor" />
...
</template>
<script>
...
import Tinymce from '@/components/tinymce'
export default {
components: { Tinymce },
data() {
return {}
}
}
</script>
这边功能是富文本中有一些特殊字符串，需要根据不同的情况提取出来，所以要用到递归调用遍历所有标签节点，然后匹配一下DB/API查询，最终效果是查询出来的值替换特殊字符串。
具体实现不说了，主要是记录一下 DOMParser：动态解析，可以将富文本的html字符串，转成document对象
handleInsert() {
...
const flagArr = []
const domParser = new DOMParser()
const doc = domParser.parseFromString(html, 'text/html')
const docArr = Array.from((doc.querySelector('body')).childNodes)
this.changeDocData(docArr, flagArr)
...
}
changeDocData(arr, flagArr) {
...
// 表格判断
if (node.nodeType === 1 && node.nodeName === 'TABLE') {
// 遍历到最后，获取text文本
if (node.nodeType === 3 && node.nodeName === '#text' && node.childNodes.length === 0)
...
}
changeDocData(arr, flagArr) {
// const reg = /#\d+#/
// const reg2 = /#(\d+)#/g
for (let i = 0; i < arr.length; i++) {
const node = arr[i]
if (node.nodeType === 1 && node.nodeName === 'TABLE') {
// 表格
const innerHTML = node.innerHTML
if (reg.test(innerHTML)) {
const numbers = innerHTML.match(reg2)
let numberVal = null
if (numbers && numbers.length > 0) {
if (new Set(numbers).size === 1) {
numberVal = numbers[0]
} else {
return this.validateState(4)
}
}
flagArr.push({
type: 2,
datasetId: '',
data: '',
repName: numberVal,
checkType: ''
})
}
} else if (node.nodeType === 3 && node.nodeName === '#text' && node.childNodes.length === 0) {
// 字符串
const htmlData = node.data
if (reg.test(htmlData)) {
const numbers = htmlData.match(reg2)
for (let i = 0; i < htmlData.split(reg).length - 1; i++) {
flagArr.push({
type: 1, // 是字符串
datasetId: '',
data: numbers[i],
repName: numbers[i],
checkType: ''
})
}
}
} else if (node.nodeType === 1 && node.childNodes.length > 0) {
// 需要递归调用
this.changeDocData(node.childNodes, flagArr)
} else {
// 异常？
console.warn('arr', arr)
console.warn('index:', i)
}
}
},
