在 Vue 项目中引入 tinymce 富文本编辑器

这篇博客的目的是记录一下Vue 中使用 tinymce 富文本编辑器，其中参考了一下 https://www.cnblogs.com/wisewrong/p/8985471.html 这篇博客，但原博客只兼容 Tinymce 4.x 不支持最新版本，所以在此做了更新。

特别说明，此博客适用于 tinymce 6.x

版本说明

"vue": "^2.6.14"，
"@tinymce/tinymce-vue": "^3.2.8",
"tinymce": "^6.1.2",

• 如果有购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce。
• 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public 目录下

初始化

引入以下文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom';
import 'tinymce/icons/default';

tinymce-vue 是一个组件，需要在 components 中注册，然后直接使用

<Editor v-model="tinymceHtml" :init="editorInit"></Editor>

编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skins 文件，content_css 指向 content.css