适用于React的富文本编辑器 -- react-umedito 图片上传本地服务器解决方案

react

react-umeditor，这是liuhong1happy同学将百度富文本编辑器用react封装的一个组件。

安装：npm install react-umeditor –save

使用：react-umeditor github文档中有介绍

这篇文章不是介绍插件是怎么用的，是总结如何将图片上传到本地服务器，并且正常使用。
问题：插件本身使用七牛作为图片服务器，与实际需求不符，我们希望上传到自己的服务器并且能正常使用。

插件本身图片上传机制：

本地配置上传图片代码：

插件源码路径：
node_modules\react-umeditor\lib\utils\FileUpload.js：

判断参数type的值是否为”qiniu”，然后决定body的值。

由此可见，插件支持上传图片到本地服务器，只需要配置type值为非”qiniu”即可。

插件源码路径：
node_modules\react-umeditor\lib\components\plugins\ImageUpload.react.js：

根据插件源码拼接的body设置本地服务器返回字符串：

{

data:{

image_src: ‘XXXXXXXX’ //image_src可替换为其他，前端配置request即可

}

status: “success”

}
解决方案：

前端配置如下：

url: 插件需要的字段上传路径
type：插件需要的字段非‘qiniu’为为本地服务器
request:插件需要的字段插件需要的参数，获取图片地址
name: 服务器需要的字段

总结：解决问题并不难，主要是解决的过程；通过阅读源码，了解插件本身的实现过程，去寻找解决问题的方法，对自己来说也是一个难得的学习过程。