最近项目中维护富文本数据需要使用富文本编辑器，之前使用的Maven-editor,、 wangEditor 、quill 功能都不够完整强大，于是决定替换为tiny-mce，但是vue官方支持版是需要付费购买服务使用api-key到云端读取富文本资源的，所以此版本为免费使用的方法，需要同时安装一下原版tinymce，以便引用资源。
安装步骤：
- 安装tinymce-vue
npm install @tinymce/tinymce-vue -S
- 安装tinymce
npm install tinymce --S
在安装完tinymce之后，在 node_modules 中找到 tinymce/skins 目录, 将 skins 目录复制到你自己存放静态引入包的目录下
因为我们的项目时多子模块模式，所以在我的项目中是放在需要使用的子模块资源原件夹中的 submoduleName/assests/tinymce
image.png
由于tinymce默认是全英文界面，可以从官网下载中文语音包放在资源文件夹里方便引用
- 在vue页面中的引用
<template>
<div>
<Editor id="tinymce" v-model="richTxt" :init="editorInit"></Editor>
</div>
</template>
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
export default {
components: { Editor},
data: {
return: {
richTxt: '',
}
},
mounted () {
// 富文本编辑器初始化
tinymce.init({
selector: '#tinymce', // change this value according to your html
block_formats: 'Paragraph=div;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre'
});
},
}
正常使用只需要前面三个引用，然后注册一下editor组件, 其余的plugins插件可以去tinymce官网查询文档，按照项目需求引入即可。然后在mount时候初始化一下tinymce配置就可以运行啦， 需要的功能都可以按照文档自行配置即可
image.png
