脚本宝典收集整理的这篇文章主要介绍了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
在使用的时候, 有许多注意的地方, 初学者可能会犯错,多看看官方的文档, 多然后自己摸索吧!
以上是脚本宝典为你收集整理的wangEditor 与 阿里的[pro ant design]的组合搭配全部内容,希望文章能够帮你解决wangEditor 与 阿里的[pro ant design]的组合搭配所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。