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

第一步,在state中创建editorState变量
可初始化赋值到编辑器中、
editorState: BraftEditor.createEditorState('<p>hello</p>');//可设置为null

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

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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值