BraftEditor做图片上传说实话拿到这玩意儿第一眼我就觉得应该做个封装。不多说了，先上图看效果。 OK，我们来想一

说实话拿到这玩意儿第一眼我就觉得应该做个封装。不多说了，先上图看效果。

OK，我们来想一想，对这个功能模块，应该具备什么

来自不同文件的应用，可能是A组件要使用它，或者B组件
参数不同，接口不同，Id不同

清楚了自己想要什么了，那么我们再来了解下API。

BraftEditor.createEditorState()

首先我们得知道它是什么，对吧

它是一个Editor对象，所以我们在初始值设置的时候，就不能给默认值赋值为空，很多文章给你说怎么怎么设置，也不给你说为什么，现在明白了吧

好的。我们现在开始对功能做封装。

我们先创建一个MyEditor.js，这就是我们的公共组件了

import React, { useEffect, memo } from 'react';
import { message, Upload, Button } from 'antd';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import { ContentUtils } from 'braft-utils';

const MyEditor = memo((props) => {
    const { value = BraftEditor.createEditorState(null), onChange = () => { }, uploadFile = () => { } } = props;
    useEffect(() => {
      console.log(value.toHTML())
      onChange(value);
    }, [value]);

    const handleChange = val => {
      onChange(val);
    };

    const uploadHandler = param => {
      if (!param.file) {
        return false;
      }
      const fmData = new FormData();
      fmData.append('file', param.file);
      uploadFile(1, fmData).then(response => {
        if (response && response.code === 20000) {
          const { url } = response.results
          message.success('上传成功');
          onChange(ContentUtils.insertMedias(value,
            [{
              type: 'IMAGE',
              url
            }]
          ));
        } else {
          message.error('上传失败');
        }
      })
    };

    const extendControls = [
      {
        key: 'antd-uploader',
        type: 'component',
        component: (
          <Upload accept="image/*" showUploadList={false} customRequest={uploadHandler}>
            <Button type="link" icon="file-image" data-title="插入图片">图片</Button>
          </Upload>
        ),
      },
    ];

    return (
        <BraftEditor value={value} onChange={handleChange}
          extendControls={extendControls}
          contentStyle={{ height: 600 }}
          style={{ border: '1px solid #d9d9d9', marginBottom: '20px' }}
        />
    );
  });

export default MyEditor;