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