在vue项目中使用tinymce编辑器（tinymce-vue）

tinymce-vue笔记项目使用vue-cli 3.x版本，tinymce51. 安装npm install @tinymce/tinymce-vue2. 引用出现的问题和摸索出的解决方案（参考了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组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容。