在vue项目里使用tinymce富文本编辑器

最近在vue项目里使用到了tinymce富文本编辑器，途中遇到不少bug，但是网上又没有很好的解决，最后摸索出来，记载一下。

下载tinymce

这里并不需要用npm安装tinymce，也不安装tinymce-vue。网上有教程说npm i tinymce安装后，把node_modules里的文件拷贝出来到public文件里，然后在index.html里引用的。都不需要！直接上官网下载你需要的版本的tinymce包并解压，以及下载对应版本的中文语言包，将zh_CN.js文件放到tinymce的langs文件夹里面。

新建组件

在项目的components里，新建一个组件，例如取名TinyEditor，并新建index.vue组件文件。将tinymce里的所有文件，拷贝到这个组件里。结构如下

组件文件

引入必须的文件tinymce.min.js、theme.min.js，以及需要的插件、语言包。

import './tinymce.min.js';
import './plugins/lists/plugin.min.js';
import './plugins/code/plugin.min.js';
import './plugins/textpattern/plugin.min.js';
import './themes/silver/theme.min.js';
import './langs/zh_CN';

在样式部分引入样式文件

@import url('./skins/ui/oxide/skin.min.css');

添加插件

例如首行缩进、行高设置等官方没有提供的插件，下载下来后，直接放到TinyEditor下的plugins文件夹里，然后在组件文件里引入，注意引入顺序要tinymce.min.js之后。

import './tinymce.min.js';
import './plugins/lists/plugin.min.js';
import './plugins/code/plugin.min.js';
import './plugins/textpattern/plugin.min.js';
import './plugins/indent2em/plugin.min.js';
import './plugins/lineheight/plugin.min.js';
import './themes/silver/theme.min.js';
import './langs/zh_CN';

完整代码

这里并没有使用数据绑定，因此需要在初始化时将内容添加进去，并监听修改的事件。特别注意要在destroyed的时候清理对象，因为tinymce是一个全局对象。

引入组件

我这里添加一个v-if，因为我要在弹窗里使用，所以要确保每次关闭弹窗时要毁掉组件。