vue富文本编辑器Tinymce使用及遇到的问题

先说环境，我用的是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'

页面元素

导入组件

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({})
  },

这样基本就可以跑起来了

下面说可能遇到的问题:

1. Uncaught SyntaxError: Unexpected token < 错误
   这个基本上就是引入语言包或者皮肤的路径错了，注意引入路径是不带public的, 如果确定引入的语言包没问题，那么看报错的是 plugin.js 还是什么其他的，如果是plugin.js那就是配置加载了某些插件但是没有import, 如果还是出错可以尝试 直接引入皮肤，配置中注释掉language_url skin_url 再试一下把

2. 没报错 但是也不显示
   这是皮肤包没正确引入的问题，检查皮肤路径 或者直接手动引入

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)

希望对你有所帮助