ueditor集成秀米编辑器

最近乙方提出了‘ueditor集成秀米编辑器’这个需求，官方文档寥寥几字，真的高估了普通开发渣的智商，所以搜了一些文档，发现相关文档比较少，并且大多数文档都是根据自己的实际项目配置，或是介绍片面，但是根据点来画线，还是成功在vue2+项目中配置了ueditor集成秀米，用小短手给自己鼓个爪（左三下，右三下，ok）。

一开始局限于根据官方文档
在ueditor中作相关操作和配置，发现二次开发需要更改很多配置，并且中间集成秀米的时候还有全局变量的问题，最后在摔键盘之前放弃了。

俗话说的好，大树底下好乘凉，在github上某个山头的大神做了一个基于vue的ueditor的组件，能够实现双向数据绑定，并且配置和使用都so easy，最后就用了这个组件，并且向大神摩拜，就是 这个组件 vue-ueditor-wrap，根据README.md，可以轻松在vue项目下配置一个ueditor编辑器

首先下载ueditor文件包，并安装在vue的static文件夹下，

然后官方下载所需文件并放到ueditor的dialogs目录

根据 vue-ueditor-wrap的文档配置好ueditor编辑器

现在你组件的代码，大概长这样

你配置好的编辑器大概长这样

那我们现在结合组件的 init 属性和 registerButton 方法，可以方便地添加自定义按钮，来对 window.UE 进行二次开发。init 函数将在 scripts 加载完毕、UEditor 初始化之前运行

<template>
  <vue-ueditor-wrap ref="editor" v-model="msg" :init="myInit"></vue-ueditor-wrap>
</template>

<script>
export default {
  methods: {
    myInit () {
      this.$refs.editor.registerButton({
        name: 'test',
        icon: '/static/xiumi-connect-icon.png',
        tip: 'this is a test tip',
        handler: (editor, name) => {
          // 点击自定义按钮事你需要做的事
        }
      })
    }
  }
}
</script>

在编辑器页面中引入一个iframe用来支撑第三方秀米的页面。 <iframe id="xiumi" src="//xiumi.us/studio/v5#/paper" v-show="showIframe"></iframe>

      this.editor = editorInstance
      var xiumi = document.getElementById('xiumi');
      var xiumi_url = 'http://xiumi.us';
      xiumi.onload = function () {
          xiumi.contentWindow.postMessage('ready', xiumi_url);
      };
      document.addEventListener('mousewheel', function (event) {
          event.preventDefault();
          event.stopPropagation();
      });
      window.addEventListener('message', function (event) {
          if (event.origin === xiumi_url) {
              self.editor.execCommand('insertHtml', event.data);
              self.$emit('input', self.editor.getContent());
              self.editor.fireEvent('catchRemoteImage');

          }
      }, false);

contentWindow属性，是指iframe所在的window对象，postMessage() 方法可以安全地实现跨源通信,实现页面与嵌套的iframe消息传递。postMessage(data,origin) data为要传递的数据，origin为目标窗口的源。

当秀米iframe加载完成后。向iframe发送一条消息，iframe的页面也通过window.addEventListener('message',xxx)接收。

我们需要做和秀米页面一样的逻辑监听message事件，秀米保存时源码里应该在触发保存事件的时候执行了
window.parent.postMessage(xxx, '*')，这样可以拿到秀米保存时候postMessage的值为event.data。event.origin为发送消息窗口的源。拿到返回值后需要你手动设置到你的编辑器中的源码中。

现在当我们点击自定义按钮时候，就会弹出秀米

现在我们就可以在秀米编辑好想要页面然后保存在ueditor中，当然，后续的图片上传肯定还会遇到问题，因为暂时还没有测试，等后续测试发布前，会在更新上线问题，嗯，先酱。