目前項目比較老，用的還是wangEditor v3版本，不滿足現(xiàn)在的需求，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需要網(wǎng)上下載，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' // 圖標 -解決測試環(huán)境找不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>
這邊功能是富文本中有一些特殊字符串，需要根據(jù)不同的情況提取出來，所以要用到遞歸調用遍歷所有標簽節(jié)點，然后匹配一下DB/API查詢，最終效果是查詢出來的值替換特殊字符串。
具體實現(xiàn)不說了，主要是記錄一下 DOMParser：動態(tài)解析，可以將富文本的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)
}
}
},
