tinymce-vue 笔记
项目使用 vue-cli 3.x 版本，tinymce5
1. 安装
npm install @tinymce/tinymce-vue
2. 引用
出现的问题和摸索出的解决方案（参考了 https://www.cnblogs.com/wisewrong/p/8985471.html，虽然文章里使用的是 tinymce4，但是也有很大帮助）
报第一个错，发现只安装 tinymce-vue 不可以，还需安装 tinymce，执行
npm install tinymce
按示例初始化发现编辑器不显示，报“theme.js:1 Uncaught SyntaxError: Unexpected token <”这个错，需要手动引入 tinymce 主题，在 init({}) 方法里加 theme: ‘silver’, 没用。
import ‘tinymce/themes/silver/theme’
不报错了但是编辑器还是不显示，继续研究，发现还需要定义 skin_url，在 init({}) 里加 skin: “oxide” 没用。先在 public 目录下新建一个文件夹命名为 tinymce，然后在 node_modules 里找到 tinymce 的 skin 包，复制到 public/tinymce 里，然后创建 tinymce 时添加一行代码
skin_url: ‘/tinymce/skins/ui/oxide’,
3. 定制
将语言改为中文
步骤：
在官网下载语言包 https://www.tiny.cloud/get-tiny/language-packages/
把下载的语言包放到之前新建的 tinymce 文件夹里
初始化时添加以下代码
language_url: `/tinymce/langs/zh_CN.js`,
language: ‘zh_CN’,
在 tinymce5 工具栏添加自定义功能按钮
const that = this
this.tinymceInit = {
toolbar: ‘imageUpload’,
setup: (editor) => {
editor.ui.registry.addButton(‘imageUpload’, {
tooltip: ‘ 插入图片 ’,
icon: ‘image’,
onAction: () => {
let upload = that.$refs.imageUpload
upload.handleClick()
}
})
}
}
上面代码是添加插入图片按钮，借助 iview 的 Upload 组件, 将图片先上传到存储云上，再将图片的存储地址放入编辑器内容。