react使用braft-editor上传图片,以及出现卡顿的情况处理

第一步,在state中创建editorState变量,braft-editor富文本认这个格式可初始化赋值到编辑器中
editorState: BraftEditor.createEditorState(‘

hello

’),//如果并不想初始化,可为null
第二步,如果有多处地方用到富文本编辑器可以封装成一个工具使用,如果不需要,则可把子组件事件监听去调用父组件的方法 改为父组件事件监听后直接调用。

富文本工具代码如下
react使用braft-editor上传图片,以及出现卡顿的情况处理
1,图片上传
1)extebdControls= {extendControls} 扩展图片上传,需要引入antd插件下的 Upload 和 icon
2)通过Upload组件 上传图片,用this.handleChange监听图片上传事件,调用父组件的uploadHandler事件处理图片上传react使用braft-editor上传图片,以及出现卡顿的情况处理
3)父组件中uploadHandler调用接口上传图片,也可以用base64方法写入图片,最后跟文本一起上传到服务器保存

2,处理卡顿情况
因为每次富文本输入字符时,都会执行 this.setState({editorState}),会导致连删或者连输入出现卡顿情况,可以使用防抖来预防,代码如下:react使用braft-editor上传图片,以及出现卡顿的情况处理
第三步,最后父组件通过写入工具代码
react使用braft-editor上传图片,以及出现卡顿的情况处理