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

网上已经有一篇类似的文章wangEditor富文本编辑器+react+antd的使用, 当然我也参考了他的写法, 然后实现了我到需求, 现在拿出来分享分享版本antd: v3.12.1wangEditor: 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 组件部分// 引入wangeditorimport 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在使用的时候, 有许多注意的地方, 初学者可能会犯错,多看看官方的文档, 多然后自己摸索吧!