react中富文本框BraftEditor的实现

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插件集成度很高，至此已经实现了基本的操作，并且支持图片和其他媒体。