wangEditor 与 阿里的[pro ant design]的组合搭配

网上已经有一篇类似的文章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在使用的时候, 有许多注意的地方, 初学者可能会犯错,多看看官方的文档, 多然后自己摸索吧!