富文本框BraftEditor的实现

BraftEditor富文本框的实现

1. 值传入

BraftEditor是受控组件，故可以利用form.getFieldDecorator()赋予初值。
需要注意的是需要用到他自己封装好的一个editorState对象，如果没有则需要用BraftEditor.createEditorState(String)函数创建一个。比如：

          <FormItem
            label="内容"
          >
            {getFieldDecorator('context', {
              //BraftEditor引用后就可以使用
              initialValue: BraftEditor.createEditorState(context) || '',
            })(
              <BraftEditor />
            )}
          </FormItem>

2. 值传出

BraftEditor比较容易获取内容，可以直接用表单拿到其内容。

    const formData = form.getFieldsValue();
    //从表单获取到富文本框的内容
    const context = formData.context;
    //context 就是最开始传入的editorState对象
    
    //富文本内容,通过其自身的函数获取
    const contextRich = context.toHTML();

总结

BraftEditor插件集成度很高，至此已经实现了基本的操作，并且支持图片和其他媒体。
再添加图片时，会将图片转码成base64作为url放入<img>标签，并存于富文本框中。当表单返回时会作为内容，协同富文本内容的其他部分一起被获取到。