React 接入 Ueditor + xiumi

在react(antd-pro)中接入秀米
*已放弃该方案,使用wangeditor+秀米

  1. 打包ueditor
  2. 在react将打包后的ueditor文件夹作为静态资源放入项目public目录下。
  3. 使用react-ueditor-wrap组件在页面使用ueditor。这里有一个坑,若使用onChange修改组件value值,编辑器光标位置会被重置,在表单中使用时要引入另一个值记录编辑器内容。
  4. 引入秀米,秀米官方给了在ueditor中使用的文档。秀米图文排版UEditor插件示例。在react中引入时iframeUrl无法按官方文档中的以路径的方式,修改路径为文件url,因为文件的地址都在react-ueditor-wrap上定义,我把html的链接也放在react中进行定义。只需要在加载组件前设置window.xiumi_iframeUrl的值。
  5. 到这一步我们已经可以在ueditor上点击秀米的图标编辑并添加至ueditor中。这里有一个官方文档没给出的问题,xxs过滤白名单上要额外修改img,添加style,防止style被过滤掉
  6. 由于在项目中第一次加载Ueditor会有延迟,所以监听window.UE对象添加loading动画。
由于某些原因,图片的转存也需要在前端直接处理~

思路大概是: 在秀米文档添加到ueditor的事件上获取添加的富文本value,提取所有的秀米图片链接,转存至自己的服务器,然后替换原来的图片地址。图片上传时会有图片防盗链的跨域问题。在html加入 <meta name="referre

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值