后台第三方编辑器接入秀米编辑器总体流程

需求背景

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

官方提供的接入方案

能够参考这两个连接 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的问题了。

但愿对有须要的同窗有帮助。最后上几张用此过程发布的文章在线上的样子。