pc-admin/src/components/rich-editor/index.jsx

import React, { forwardRef, useRef, useEffect, useMemo, useImperativeHandle } from 'react'
import { uploadImage } from '@/services/image'

export default forwardRef((props, ref) => {
  const editorRef = useRef()
  const id = useMemo(() => `mce-${Math.random().toString(36).substring(2, 10)}`, [])

  useEffect(() => {
    window.tinymce.init({
      selector: `#${id}`,
      menubar: false,
      language: 'zh_CN',
      plugins: 'image',
      image_description: false,   // 禁用图片描述
      image_dimensions: false,  // 禁用图片宽高设置
      toolbar: 'blocks fontfamily fontsize bold italic backcolor alignleft aligncenter alignright alignjustify image outdent indent undo redo removeformat',
      setup: (editor) => {
        editor.on('change', () => {
          props.onChange(editor.getContent());
          console.log(editor.getContent())
        })
      },
      init_instance_callback: (editor) => {
        editorRef.current = editor;
      },
      images_upload_handler: (blobInfo, progress) => {
        return new Promise((resolve, reject) => {
          const formData = new FormData();
          formData.append('file', blobInfo.blob(), blobInfo.filename());
          uploadImage(formData).then(resolve)
        })
      }
    });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id])

  useImperativeHandle(ref, () => ({
    setContent: (val) => {
      if (editorRef.current) {
        editorRef.current.setContent(val)
      } else {
        const t = setInterval(() => {
          if (editorRef.current) {
            editorRef.current.setContent(val)
            clearInterval(t)
            console.log('-clearInterval-')
          }
        }, 200)
      }
    }
  }))

  return (
    <textarea id={id} />
  )
})