先说环境，我用的是cli3, 然后安装的tinymce5，本文主要说遇到问题的解决办法，配置等就比较简单了
首先安装网上有很多文章都一样，这步基本没啥问题
npm install -s @tinymce/tinymce-vue
npm install -s tinymce
安装完后，在node_modules/tinymce目录下找到skins 这个文件夹复制到 /public/tinymce（目录自建）如果你是cli2 那就是/static/tinymce/下
其次下载中文包，这个据说有墙，下载好了把解压出来的langs移动到上一步skins同级目录
因为我只在一个页面用这个所以就不单独封装了，页面引入
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import Editor from '@tinymce/tinymce-vue'
页面元素
<editor v-model="myValue" :init="init" ></editor>
导入组件
components: {
Editor
}
配置 这个按需配置 具体看官方文档，注意url 不要写错了 不然会报错
init: {
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
height: 300,
skin_url: '/tinymce/skins/ui/oxide',
plugins: 'link lists image code table textcolor wordcount contextmenu',
toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
branding: false,
menubar: false,
/* images_upload_handler: (blobInfo, success, failure) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
} */
},
根据需要的插件引入插件
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/textcolor'
mounted中
mounted() {
tinymce.init({})
},
这样基本就可以跑起来了
下面说可能遇到的问题:
Uncaught SyntaxError: Unexpected token <错误
这个基本上就是引入语言包或者皮肤的路径错了，注意引入路径是不带public的, 如果确定引入的语言包没问题，那么看报错的是 plugin.js 还是什么其他的，如果是plugin.js那就是配置加载了某些插件但是没有import, 如果还是出错可以尝试 直接引入皮肤，配置中注释掉language_urlskin_url再试一下把没报错 但是也不显示
这是皮肤包没正确引入的问题，检查皮肤路径 或者直接手动引入
import 'tinymce/skins/ui/oxide/skin.css'
下面贴几个我在做的时候对我有帮助的文章
这个是老版本的，不建议按照他的教程来，这个教程的价值在下面的评论中
[Wise.Wrong](https://www.cnblogs.com/wisewrong/p/8985471.html)
这个是比较现代版的教程
[liubing.me](https://liubing.me/vue-tinymce-5.html)
这个是另一个人总结的问题解决办法
[segmentfault.com](https://segmentfault.com/a/1190000018358304)
希望对你有所帮助
