wangeditor富文本与react antd表单结合

如上图，在输入框里输入的富文本内容，在点击确定按钮后会解析到下方“富文本内容”处展示
下面是完整代码

import React, { useEffect, useState } from 'react'
import { Form, Button} from 'antd'
import E from 'wangeditor'

const IndexPage = () => {
  const [form] = Form.useForm()
  const [content, setContent] = useState('')

  useEffect(() => {
    const text = document.getElementById('text');
    const editor = new E(text)
    // 使用 onchange 函数监听内容的变化
    // console.log(editor, editor.config)
    editor.config.onchange = (html) => {
      // console.log(editor.txt.html())
      // editor.txt.text() //这个只能展示文字，不能展示图片

      // 将富文本内容设置给表单值
      form.setFieldsValue({
        content:html
      })
    }
    editor.config.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'fontSize',  // 字号
      'fontName',  // 字体
      'italic',  // 斜体
      'underline',  // 下划线
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      'emoticon',  // 表情
      'image',  // 插入图片
      'table',  // 表格
      'video',  // 插入视频
      'code',  // 插入代码
      'undo',  // 撤销
      'redo'  // 重复
    ]
    editor.config.uploadImgShowBase64 = true
    editor.create()
  }, [])

  const onFinish = (values) => {
    // console.log('---', values);
    // 提交表单的时候将表单值保存起来
    setContent(values.content)
  };

  return (
    <Form
      form={form}
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        name="content"
      >
        <div id="text"></div>
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          确定
        </Button>
      </Form.Item>
      {/* 解析富文本html */}
      <div>
        富文本内容：
        <span dangerouslySetInnerHTML={{ __html: content }}></span>
      </div>
    </Form>
  )
}
export default IndexPage