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