需求背景

公司的管理后台有集成的富文本编辑器，运营同学可以在后台编辑文章发布到我们的服务器上，然后在客户端微信上可以作为一些内容的点击链接或者直接访问来显示出编辑的效果。但是我们的编辑器排版资源不够丰富，而且大部分运营同学都习惯秀米编辑器，在秀米编辑器上收藏了很多文章，而且秀米能够同步文章到公众号，且排版资源丰富。所以就考虑把秀米编辑后的文章移植到我们的编辑器里，然后我们的编辑器只当做一个发布的平台就好了。

官方提供的接入方案

可以参考这两个链接 http://r.xiumi.us/board/v5/2a5va/16516964 http://hgs.xiumi.us/uedit/ 但是发现一些问题，并不适合我们的编辑器。官方文档要求编辑器是Ueditor的内核。而且看了一下要求在页面引入的js都是以Ueditor为基础的，比如说UE.registerUI，虽然这段代码只是在Ueditor编辑器上提供打开秀米的入口，但是由于我们的代码里根本没有UE的全局变量，所以引入会报错。这样的话我们就只能自己试着接入了。

自己动手接入

整个过程大概是在你的编辑器的页面手动触发打开一个第三方的秀米页面。然后在这个页面中你可以利用秀米所有的内容进行编辑还可以登录找到你之前收藏在秀米的文章。然后编辑完成后，点击一个保存按钮，就把用秀米编辑的内容原封不动的放到了你的编辑器中(其实是把源码发送回到的你编辑器中). 现在来看代码： 首先在你的编辑器页面中引入一个iframe用来支撑第三方秀米的页面。 <iframe id="xiumi" src="//xiumi.us/studio/v5#/paper" v-show="showXiumi"></iframe>

var xiumi = document.getElementById("xiumi");
xiumi.onload = () => {console.log("postMessage");this.loadingXiumi = false;//由于秀米加载时间比较长，应该自定义一个loading，这里写你的自定义loading的代码xiumi.contentWindow.postMessage("ready", xiumi_url);
};
window.addEventListener("message",() => {if (event.origin == xiumi_url) {editor.$txt.html(event.data);//这步是你拿到秀米的源码后需要手动设置到你的编辑器的源码中去this.showXiumi = false;}},false
);

首先来看contentWindow属性，是指iframe所在的window对象，兼容各个浏览器可获得子窗口的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为发送消息窗口的源。拿到返回值后需要你手动设置到你的编辑器中的源码中(一般的编辑器都提供此api)。

点击秀米编辑显示iframe。如图：

遇到的问题

路径的问题

iframe中的src秀米demo里给的是http://xiumi.us/studio/v5#/paper，在测试环境的话同是http协议所以没有报错，但是我们线上是https所以存在了跨域请求的问题，所以改成"//xiumi.us/studio/v5#/paper"会去自动找协议,http就是http，https就是https了，所以就不存在跨域的问题了。

图片的问题

用秀米编辑的文章图片都是存在秀米服务器上的，当我们在我们的页面上访问比如这张图片http://statics.xiumi.us/stc/images/templates-assets/tpl-paper/image/6b22202e1bfb85cb8deb498cda43ec74-sz_519257.jpg的话会出现 You do not have permission to get URL '/stc/images/templates-assets/tpl-paper/image/6b22202e1bfb85cb8deb498cda43ec74-sz_519257.jpg' from this server.但是在浏览器直接get请求的话是可以取到的，可能是因为在我们页面发请求的时候请求头中带了refer也可能是别的原因(秀米自己做了一些限制)。 解决办法有两个： 第一个比较麻烦就是通过把图片上传到自己的图片服务器上，然后在秀米编辑时候以链接的形式插入，但是如果文章有大量图片的话对运营同学就比较残忍了。 第二个办法是，你先统计一下秀米图片的路径大概都有哪些，然后在你的编辑器保存的时候，让后端同学对拿到的内容所有秀米图片的路径做一次替换，替换为自己服务器的路径。然后你再你的页面访问的就是你们自己的链接，后端同学还需要用服务器做一次转发，当我们去请求我们的链接时，用服务器去请求秀米的图片然后在把请求到的图片发送给客户端。这样就不存在之前的403的问题了。

希望对有需要的同学有帮助。最后上几张用此过程发布的文章在线上的样子。