react 富文本

import React, { FC, useContext, useState,  forwardRef, useEffect } from 'react';
import { Form, Modal, Input, Select, InputNumber } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { OfficialAPI, CommonAPI } from '@/api';
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import Context from '@/context/Context';
import UploadWithImg from '@/components/Upload/UploadWithImg';
import { WindowsOutlined } from '@ant-design/icons';
const FormItem = Form.Item;
const { Option } = Select;

interface Props extends Partial<OfficialAPI.MessageListItem> {
    editVisible: boolean;
    onCancelEdit: () => void;
    onOkEdit: (params: any) => void;
}

 const EditModal: FC<Props> = ({ editVisible, onCancelEdit, onOkEdit,  ...fieldsValue }) => {
  // const extendControls = [
  //   {
  //     key: 'antd-uploader',
  //     type: 'component',
  //     component: <UploadWithImg onChangeQrcode={handleMediaChange} />, //自定义的媒体文件上传组件
  //   },
  // ];
  
  const myUploadFn = async (param: any) => {
    console.log(param)
    const fd = new FormData()
    fd.append('file', param.file)
    console.log(fd)
    const res = await CommonAPI.fetchUploadSignalUrl(param.file.name)
    console.log(res)
    const successFn = (response: any) => {
      console.log(response)
      // 假设服务端直接返回文件上传后的地址
      // 上传成功后调用param.success并传入上传后的文件地址
      param.success({
        url: res,
      })
    }
    const progressFn = (event: any) => {
      // 上传进度发生变化时调用param.progress
      param.progress(event.loaded / event.total * 100)
    }
    const errorFn = (response: any) => {
      // 上传发生错误时调用param.error
      param.error({
        msg: 'unable to upload.'
      })
    }
    window.addEventListener("progress", progressFn, false)
    window.addEventListener("load", successFn, false)
    window.addEventListener("error", errorFn, false)
    window.addEventListener("abort", errorFn, false)
  }

    const [form] = useForm();
    const id = fieldsValue.id
    // const { courseList } = useContext(Context);
    const oncheck = async () => {
      const value = await form.validateFields();
      const content = value.edit_content.toHTML()
      var data = {
        tittle: value.edit_title,
        id: id,
        tap: value.edit_tap,
        type: value.edit_type,
        sorted_weight: value.edit_sorted_weight,
        content: content,
        cover_url: value.edit_cover_url
      }
      onOkEdit(data);
    //   onCancelEdit()
    };
  // 新建图片上传
  const onChangeQrcode = (qrcode: string) => {
    // setHandleImg(qrcode)
    form.setFieldsValue({ edit_cover_url: qrcode });
  };
  useEffect(() => {
    // form.resetFields()
 }, [editVisible])
  useEffect(() => {
    form.resetFields()
    form.setFieldsValue({
      edit_title: fieldsValue?.tittle,
      edit_tap: fieldsValue?.tap,
      edit_type: fieldsValue?.type,
      edit_sorted_weight: fieldsValue?.sorted_weight,
      // edit_content: fieldsValue?.content
      edit_content: BraftEditor.createEditorState(fieldsValue?.content)
    })
  }, [fieldsValue.id]);
    return (
     <Modal
        visible={editVisible}
        width={800}
        title="编辑资讯"
        bodyStyle={{ padding: 24 }}
        destroyOnClose
        forceRender
        okText="保存"
        onOk={() => oncheck()}
        onCancel={onCancelEdit}
      >
      <Form form={form}
      >
        <FormItem
          name="edit_title"
          label="资讯标题"
          labelCol={{ span: 3 }}
          initialValue={fieldsValue.tittle}
          rules={[{ required: true, message: '必选项' }]}
        >
          <Input placeholder="请输入标题" maxLength={30}/>
        </FormItem>
        <FormItem
          name="edit_type"
          label="类型"
          labelCol={{ span: 3 }}
          rules={[{ required: true, message: '必选项' }]}
        >
          <Select placeholder="请选择">
            <Option value="行业聚焦">行业聚焦</Option>
            <Option value="秒可动态">秒可动态</Option>
            <Option value="office技巧">office技巧</Option>
          </Select>
        </FormItem>
        <FormItem
          name="edit_tap"
          label="标签"
          labelCol={{ span: 3 }}
          initialValue={fieldsValue.tap}
        >
          <Input placeholder="限5个，用分号隔开" />
        </FormItem>
        <FormItem
            name="edit_sorted_weight"
            label="权重(正整数)"
            labelCol={{ span: 4 }}
            rules={[{ required: true, message: '必填项'}]}
            >
                <InputNumber min={1} precision={0} />
        </FormItem>
        <FormItem
            name="edit_cover_url"
            label="封面图(像素600*600)"
            labelCol={{ span: 5 }}
        >
                <UploadWithImg onChangeQrcode={onChangeQrcode}/>
        </FormItem>
        <FormItem
            name="edit_content"
            label="文章内容"
            labelCol={{ span: 3 }}
            rules={[{ required: true, message: '必填项'}]}
            >
              <BraftEditor
                className="my-editor"
                media={{uploadFn: myUploadFn}}
                placeholder="请输入正文内容"
                style={{border: '1px solid #e8e8e8'}}
              />
                {/* <Input.TextArea /> */}
        </FormItem>
      </Form>
    </Modal>
    )
}
export default EditModal;