tinymce vue 部分工具不显示_在vue项目中使用tinymce编辑器（tinymce-vue）

tinymce-vue笔记

项目使用vue-cli 3.x版本，tinymce5

1. 安装

npm install @tinymce/tinymce-vue

2. 引用

报第一个错，发现只安装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. 定制

将语言改为中文

步骤：

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组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容。