braft-editor上传图片功能

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

 <ProForm.Item
            label="文章内容"
          >
            <BraftEditor
              value={content}
              controls={controls}
              onChange={(editorState) => { setContent(editorState) }}
              extendControls={extendControlsContent}
            ></BraftEditor>
          </ProForm.Item>

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

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

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

const extendControlsContent: any = [
    {
      key: 'antd-uploader',
      type: 'component',
      component: (
        <Upload 
          accept="*"
          showUploadList={false}
          onChange={handleImageContentChange}
          action='http://127.0.0.1:9097/upload/image'
        >
          <button type="button" className="control-item button upload-button" data-title="插入图片">上传图片</button>
        </Upload>
      )
    }
  ]

最重要的就是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 错误，这也是为了记录一下自己解决这个问题的步骤

本文连接：点击
博主个人小博客：嘿嘿