React 接入 Ueditor + xiumi

在react（antd-pro）中接入秀米
*已放弃该方案，使用wangeditor+秀米

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

由于某些原因，图片的转存也需要在前端直接处理~

思路大概是：在秀米文档添加到ueditor的事件上获取添加的富文本value，提取所有的秀米图片链接，转存至自己的服务器，然后替换原来的图片地址。图片上传时会有图片防盗链的跨域问题。在html加入 <meta name="referrer" content="never" />可以解决。图片上传使用了oss，oss-sdk的引入放在UE对象加载的地方使用Ueditor提供的utils.loadFile函数。加载后获取ossToken存储在全局对象中，在iframe中使用parent.window获取。

window.addEventListener('message',function(event) {if (event.origin == xiumi_url) {var reg = /(http|https):\/\/[^\.]+\.xiumi\.us\/[^\.]+\.(png|gif|jpg|jpeg|bmp)/gi;var insertData = event.data.replace(/(\?x-oss[^\"\'\)\>\&]*)/g, '');if (insertData.match(reg) && insertData.match(reg).length) {var imgs = unique(insertData.match(reg)); // 去重var _ossData = parent.window.OssData;var OSS = parent.window.OSS;var client = new OSS({region: _ossData.region, //你的oss地址accessKeyId: _ossData.accessKeyId, //你的akaccessKeySecret: _ossData.accessKeySecret, //你的secretstsToken: _ossData.stsToken, //这里我暂时没用，注销掉bucket: _ossData.bucket, //你的oss名字});console.log('images', imgs);imgs.forEach((i, idx) => {uploadImg(i, client, function(link) {if (link) {// var _reg = new RegExp(i+'([^\"\'\)]*)',"ig");var _reg = new RegExp(i, 'ig');insertData = insertData.replace(_reg, link);}if (idx === imgs.length - 1) {console.log('alreadyReplace', !reg.test(insertData));editor.execCommand('insertHtml', insertData);dialog.close();}});});} else {editor.execCommand('insertHtml', event.data);dialog.close();}}},false,
);

另记录两个bug：

秀米未登录时编辑自定义文字内容不会被添加
秀米添加到ueditor时光标所在元素不能为secetion

React 接入 Ueditor + xiumi相关推荐

React接入Sentry.js
// 需要安装的库 yarn add raven-js --save yarn add raven-for-redux --save // 在创建store的地方 import * as Raven ...
react 接入企业微信登录组件
需求简述把某web登录页替换成使用企业微信的扫码登录. 具体实现自建应用:登录企微后台/应用管理,滑到最底部,创建应用并填写应用相关信息: 2. 创建成功之后,进入应用详情,配置可信域名以及授权登 ...
react全家桶从0到1(react-router4、redux、redux-saga)
本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解, ...
前端vue适配不同的分辨率_浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生,RN 与 Weex 的跨界也常为我们所津津乐道.UI 框架在实现这样的跨端渲染时需要做哪些工作,其技术方案能否借鉴乃至应用到我们自己 ...
edui 富文本编辑_React中使用UEditor百度富文本的方法
前言本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程.注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入uedito ...
很详细的SpringBoot整合UEditor教程
很详细的SpringBoot整合UEditor教程 2017年04月10日 20:27:21 小宝2333 阅读数:21529 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
React框架发展史
原文地址: https://www.deaboway.com/react框架发展史.html#.YHr1L0j7QZE React开源地址:https://facebook.github.io/rea ...
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择? 先看看市面上都有哪些可用的富文本编辑器: TinyMCE(插件式的,支持 Vue,React,Angular 框架) ...

React 接入 Ueditor + xiumi

由于某些原因，图片的转存也需要在前端直接处理~

另记录两个bug：

React 接入 Ueditor + xiumi相关推荐

最新文章

热门文章