React +antd +wangEditor 富文本编辑器

1. 安装

npm i wangeditor --save      

2. 引入：

import E from 'wangeditor';      

3. 渲染：

<div id="div1"></div>      

const editor = new E('#div1')
editor.create();      

实现效果：

 上面我们成功的把wangEditor 这个富文本编辑器显示到页面上了，接下来我们需要做的事情就是我们要获取到富文本编辑器中的内容

4. 获取内容

通过onchange 获取到内容：

const editor = new E('#div1')
      editor.config.onchange=html=>{
        this.setState({
          editorContent:html
        })
      }
      editor.create();      

上传文件：现在我是什么也没有配置的，也没有对wangEditor 进行个性化，那么我们看看此时上传文件是怎样来处理的

我们在这里仅仅只能插入网络图片，然而我的目的是实现将本地文件上传到服务器上，那么该怎样来配置

 当我们增加了这一个配置之后，也就是我们给文件一个上传的地址，此时存在的本地文件的上传

 我们需要在后台编写上传的文件的接口

上传的过程中，我想传入某些参数：

 自定义文件的名称：

 现在我的文件可以上传成功了，如果想要回显的化，我们返回的参数要符合要求

 其中data 是一个数组，里面是我们的图片的url

 上面就是我们使用wangEditor的一个实例