braft-editor上传图片功能

由于自己使用的是纯函数，所以这里不多说，直接开始
在form表单中使用，首先去掉form.item的name属性，在利用useState去赋值

 
             { setContent(editorState) }}
              extendControls={extendControlsContent}
            >
          

在这里自己使用的是ProComponents其实和ant design相同只不过再次封装了一次，（不过不是特别好用）
给content进行初始化赋值

const [content, setContent] = useState(BraftEditor.createEditorState(null))

然后就是上传图片时利用的ant-design upload组件

const extendControlsContent: any = [
    {
      key: ‘antd-uploader‘,
      type: ‘component‘,
      component: (
        
          上传图片
        
      )
    }
  ]

最重要的就是onChange事件

const handleImageContentChange = (info: any) => {
    if (info?.file?.response?.message == "success") {
      setContent(ContentUtils.insertMedias(content, [{
        type: ‘IMAGE‘,
        url: info?.file?.response?.url
      }]))
    }
  }

特别是在上一个onChange事件中，set传入的值注意一下，
提交表单的时候在进行处理，输出html格式

val.content = content.toHTML()

在修改表单的时候去赋值

useEffect(() => {
    if (values?.id) {
      setContent(BraftEditor.createEditorState(values?.content))
    }
  }, [])

特别注意的时候就是，文字和图片结合，文字在前的时候会报 getSelection 错误，这也是为了记录一下自己解决这个问题的步骤

本文连接：
博主个人小博客：

原文：https://www.cnblogs.com/wwj0418/p/15036227.html