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

一开始局限于根据官方文档

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

俗话说的好，大树底下好乘凉，在github上某个山头的大神做了一个基于vue的ueditor的组件，能够实现双向数据绑定，并且配置和使用都so easy，最后就用了这个组件，并且向大神摩拜，就是 这个组件

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

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

根据

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

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

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

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) => {

// 点击自定义按钮事你需要做的事

}

})

}

}

}

在编辑器页面中引入一个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中，当然，后续的图片上传肯定还会遇到问题，因为暂时还没有测试，等后续测试发布前，会在更新上线问题，嗯，先酱。