在react中使用wangEditor3

首先要先在项目中安装wangEitor包
在控制台中输入以下命令 npm install wangeditor 安装（注意，这里wangeditor全是小写字母）

import E from 'wangeditor'   // 引用

class App extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      content: "<div>默认值</div>"
    }
  }
  componentDidMount() {
    const elem = this.refs.editorElem; //获取editorElem盒子
    const submit = this.refs.submit; //获取提交按钮
    const editor = new E(elem)  //new 一个 editorElem富文本
    editor.customConfig.uploadFileName = 'upfile' //置上传接口的文本流字段
    editor.customConfig.uploadImgServer = 'https://dev.xiaomon.com/api/treeroot/v1/xxx/upload/uploadImage'//服务器接口地址
    editor.txt.html(this.state.content)  //设置富文本默认内容
    editor.create() //创建
    editor.customConfig.uploadImgHooks = {
      customInsert: function (insertImg, result, editor) {
        var url = result.url  //监听图片上传成功更新页面
        insertImg(url)
      }
    }
    submit.addEventListener('click', function () {  //监听点击提交按钮
      // 读取 html
      this.setState({
        content: editor.txt.html()  //获取富文本内容
      })
    }, false)
  }
  render() {
    return (
      <div>
        <h2>富文本编辑器</h2>
        <div ref="editorElem"></div>
        <div ref="submit">提交</div>
      </div>
    );
  }
}
export default App;

image