VUE项目引入富文本编辑器tinymce

最近项目中维护富文本数据需要使用富文本编辑器，之前使用的Maven-editor,、 wangEditor 、quill 功能都不够完整强大，于是决定替换为tiny-mce，但是vue官方支持版是需要付费购买服务使用api-key到云端读取富文本资源的，所以此版本为免费使用的方法，需要同时安装一下原版tinymce，以便引用资源。

安装步骤：

1. 安装tinymce-vue

npm install @tinymce/tinymce-vue -S

2. 安装tinymce

npm install tinymce --S

在安装完tinymce之后，在 node_modules 中找到 tinymce/skins 目录, 将 skins 目录复制到你自己存放静态引入包的目录下
因为我们的项目时多子模块模式，所以在我的项目中是放在需要使用的子模块资源原件夹中的 submoduleName/assests/tinymce

image.png

由于tinymce默认是全英文界面，可以从官网下载中文语音包放在资源文件夹里方便引用

3. 在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