vue使用ueditor（vue-ueditor-wrap）

背景：有一天产品突然想实现直接复制公众号文章到自己后台管理系统进行文章维护，我们的后台系统的编辑器用的是tinymce。后来由于运营那边都是用别的第三方编辑器去编辑各种花里胡哨的文章，然后再复制过来后台系统这边发布，由于发布文章也是展示在移动端上的，然后就会有不少问题什么图片展示问题什么等等等等

1：文章的排版错误，发布出去的内容排版和秀米编辑器上面的相差太远
2：由于在秀米编辑器那边发布的文章，上传的图片都是存在他们的服务器，然后我们后台发布后就出现了防盗链显示不出来的情况，就更是加剧了排版错乱

解决方案：让在秀米编辑器复制过来的文档在我们的后台系统发布时候排版正常，已经，处理防盗链的问题，就是将第三方的图片转存到我们自己的服务器或者oss

然后发现，秀米官方有提供给第三方的对接方案。我们这边系统需要有自己的编辑器，毕竟有时候也是会有不需要花里胡哨排版的时候的，所以，就采用了秀米官方提供的第二个方案，但是有个前提，必须是UEditor的内核。那就是说，我们就要采用UEditor的编辑器了。

秀米第三方对接



一、引入UEditor
1、因为我们后台用的技术栈是vue，就采用了大佬封装好的vue-ueditor-wrap。然后按照它的说明来安装，npm安装好包后，按照说明去UEditor 官网下载UEditor文件夹，放在项目的静态资源文件夹下就行。



2、引入组件 & 注册

import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

....... 这里略过了~这里的配置就按照github上面一步步配置就行了，最后最重要是编辑器配置的UEDITOR_HOME_URL 和 serverUrl两个选项。具体可以看UEditor文档UEditor文档

二、引入秀米，集成进UEditor
这里是官网的引入实例，秀米图文排版UEditor插件示例

按照他的文档引入就行了，这里没有什么坑。有个小坑后面在图片转存的时候才需要去搞。

这一步引入没啥问题的话，编辑器的工具栏就会展示出来一个秀米的小图标在最后面了。

参考大神文件：UEditor + 秀米编辑器的集成 + 编辑器富文本图片的转存