网上已有一篇相似的文章wangEditor富文本编辑器+react+antd的运用, 固然我也参考了他的写法, 然后完成了我到需求, 如今拿出来分享分享

版本

antd: v3.12.1
wangEditor: v3.1.1

我们用编辑器, 大部份状况是在表单中运用, 而antd的表单体系, 平常也离不了 form.getFieldDecorator(id, options),

1 装置

很简单 npm install wangeditor (注重,满是小写)

2 和getFieldDecorator绑定

<Form.Item>
  {form.getFieldDecorator('YourInputName', {
  // ...一些属性设置
  })(<div ref={node => this.node = node} />)}
</Form.Item>

ref={node => this.node = node}这段代码,eslint会划红线,理由是没有返回值,本人才能有限,不知道怎样解, 还请大神指导指导,假如你没有eslint,那就不必管它

3 组件部份

// 引入wangeditor
import WangEditor from 'wangeditor';

// ...

componentDidMount() {
    // 这个onChange事宜, 是getFieldDecorator绑定的时刻带入的, 他会庖代被绑定的组件的onChange事宜
    // 平常和getFieldDecorator绑定过的,都用onChange来传值
    // value也是getFieldDecorator绑定过来的, 
    const { onChange, value } = this.props;
    const editor = new WangEditor(this.node);
    editor.customConfig.onchange = html => {
        // 通报html
        onChange(html);
    }
    editor.create();
    // 设置初始内容
    editor.txt.html(value);
}

好了,已绑定好了,很简单吧,getFieldDecorator在运用的时刻, 有很多注重的处所, 初学者可能会出错,多看看官方的文档, 多然后本身探索吧!