react 中如何使用 ueditor 富态编辑器

NPM：

# npm i react-ueditor-component

import ReactUEditorComponent from 'react-ueditor-component';

state = {
    value: '',
    serverExtra: {
      // 上传文件额外请求头
      headers: {
        // Auth: 'token'
        'Access-Control-Allow-Origin': '*',
        Authorization: 'Bearer ' + getToken(),
      },
      // 上传文件额外的数据
      extraData: {
        // desc: 'more data',
        mod: 0,
        opt: 0,
      }
    }
  };

onChange = (value) => {
  this.setState({value});
  console.log( value);
} 

<ReactUEditorComponent
    value={this.state.value}
    onChange={this.onChange}
    ueditorOptions={{
    serverOptions: {
        /* 上传图片配置项 */
        imageActionName: 'uploadimage', /* 执行上传图片的action名称 */
        imageFieldName: 'file', /* 提交的图片表单名称 */
        imageMaxSize: 2048000, /* 上传大小限制，单位B */
        imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], /* 上传图片格式显示 */
        imageCompressEnable: true, /* 是否压缩图片,默认是true */
        imageCompressBorder: 1600, /* 图片压缩最长边限制 */
        imageInsertAlign: 'none', /* 插入的图片浮动方式 */
        imageUrlPrefix: '', /* 图片访问路径前缀 */
        imageResponseKey: 'fileURL', //! 图片上传接口response中包含图片路径的键名

        /* 上传视频配置 */
        videoActionName: 'uploadvideo', /* 执行上传视频的action名称 */
        videoFieldName: 'file', /* 提交的视频表单名称 */
        videoPathFormat: '/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上传保存路径,可以自定义保存路径和文件名格式 */
        videoUrlPrefix: '', /* 视频访问路径前缀 */
        videoMaxSize: 102400000, /* 上传大小限制，单位B，默认100MB */
        videoResponseKey: 'url',
        videoAllowFiles: [
          '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',
          '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid'
        ]
      },
    // 上传文件时的额外信息
    serverExtra: this.state.serverExtra,
    serverUrl: ' ' + '/upload', // 上传文件的接口
    }}
/>

utf8-php git下载地址：https://github.com/zzbigbigboy/ueditor

例：antd pro 中 document.ejs 引用 放入public下引用

<script src="/utf8-php/ueditor.config.js"></script>
<script src="/utf8-php/ueditor.all.js"></script>

上传接口返回：
utf8-php/ueditor.all.js
24691行

xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        var res = JSON.parse(xhr.responseText)
        // MRRK: 自定义返回图片的url字段名
        // author: eschere
        var url = res[me.options.imageResponseKey] || res.url;
        if(!res.url) {
            url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563765207&di=8cdb63c9bfed3e54fc4e9e296fe4558e&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201507%2F06%2F20150706081750_zuA3P.thumb.700_0.jpeg';
        }
        var link = me.options.imageUrlPrefix + url;
        loader = me.document.getElementById(loadingId);
        console.log(res)
        if (url && loader) {
            loader.setAttribute('src', link);
            loader.setAttribute('_src', link);
            loader.setAttribute('title', res.title || '');
            loader.setAttribute('alt', res.original || '');
            loader.removeAttribute('id');
            domUtils.removeClasses(loader, 'loadingclass');
            me.fireEvent("contentchange");
        } else {
            showErrorLoader('上传错误');
        }
    } else {
        showErrorLoader(me.getLang('simpleupload.loadError'));
    }
};

官方文档：https://fex.baidu.com/ueditor/#start-config
参考文章：https://www.npmjs.com/package/react-ueditor-component