vue与tinymce5富文本编辑器的结合使用

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器,在移动端还是网页端都运用十分广泛，这篇文章主要讲述的是结合vue项目和tinymce5的使用方法，这个是结合了网上的多篇优质博客加上自己的实践总结得到的一写经验，希望它能帮到一些人解决自己的问题。
其中文参考文档：http://tinymce.ax-z.cn/

插件安装

// 安装 tinymce-vue
npm install @tinymce/tinymce-vue -S
// 安装 tinymce
npm install tinymce -S

当然可能会有些小伙伴在安装的时候一直报错（没错，说得就是我），所以提供以下解决方案：
在package.json文件中的dependencies配置中加入以下内容：

 "dependencies": {
    "@tinymce/tinymce-vue": "^2.0.0",
    "tinymce": "^5.0.3",
  }

再去执行 npm install 即可

使用前操作

• 下载语言包 https://liubing.me/goto/https://www.tiny.cloud/get-tiny/language-packages/
• 下载后文件解压后放入vue项目中的static文件夹中新建的tinymce文件夹中
• 在node_modules包中寻找tinymce文件夹中skin文件夹也移动到static文件夹中新建的tinymce文件夹中

原因：安装的依赖包里面默认么有lang这个文件夹包，所以需要手动下载，而skin的放置则是因为tinymce富文本器一定要去skin这个配置正确才可以显示出。 放置在static是保证在项目打包是也可以找到配置文件

结合官方文档封装tinymce组件

vue引用组件

注意：上传图片时需要实现本地上传，只要编写了upload_handler函数即可出现本地上传图片的功能，根据服务器响应后返回的数据,需要在success(data.imgUrl)发送返回的地址才可以正确渲染到富文本编辑器中