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

本文介绍了如何将秀米编辑器接入后台管理系统,详细讲述了需求背景、官方接入方案的局限、自行接入的步骤,包括创建iframe、利用postMessage进行跨窗口通信,以及解决跨域和图片访问权限问题的方法。通过这些操作,可以实现秀米编辑内容在后台编辑器的无缝展示。
摘要由CSDN通过智能技术生成

需求背景

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

官方提供的接入方案

可以参考这两个链接 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"

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值