React 接入 Ueditor + xiumi

在react（antd-pro）中接入秀米

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="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, //你的ak
            accessKeySecret: _ossData.accessKeySecret, //你的secret
            stsToken: _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：

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