html 富文本框滚动条,react中富文本框BraftEditor的实现

BraftEditor富文本框的实现

1. 值传入

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

label=”内容”

>

{getFieldDecorator(‘context’, {

initialValue: BraftEditor.createEditorState(Base64.decode(context)) || ”,

})(

)}

2. 值传出

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

const formData = form.getFieldsValue();

//从表单获取到富文本框的内容

const context = formData.context;

//context 就是最开始传入的editorState对象

//富文本内容

const contextRich = context.toHTML();

总结

BraftEditor插件集成度很高，至此已经实现了基本的操作，并且支持图片和其他媒体。

本文由乐趣区整理发布，转载请注明出处，谢谢。