react中富文本框BraftEditor的实现

共计 551 个字符，预计需要花费 2 分钟才能阅读完成。

BraftEditor 富文本框的实现
1. 值传入
BraftEditor 是受控组件，故可以利用 form.getFieldDecorator() 赋予初值。需要注意的是需要用到他自己封装好的一个 editorState 对象，如果没有则需要用 BraftEditor.createEditorState(String) 函数创建一个。比如：
<FormItem
label=” 内容 ”
>
{getFieldDecorator(‘context’, {
initialValue: BraftEditor.createEditorState(Base64.decode(context)) || ”,
})(
<BraftEditor />
)}
</FormItem>
2. 值传出
BraftEditor 比较容易获取内容，可以直接用表单方式拿到其内容。
const formData = form.getFieldsValue();
// 从表单获取到富文本框的内容
const context = formData.context;
//context 就是最开始传入的 editorState 对象

// 富文本内容
const contextRich = context.toHTML();
总结
BraftEditor 插件集成度很高，至此已经实现了基本的操作，并且支持图片和其他媒体。