qingDao_goods/src/components/ZRichTextOne/index.tsx

import React, { useCallback, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'

// 引入编辑器组件

// 安装---npm install braft-editor --save --force
// npm install braft-utils --save --force
import { ContentUtils } from 'braft-utils'
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

import classNames from 'classnames'
import { MessageFu } from '@/utils/message'
import { fileDomInitialFu } from '@/utils/domShow'
import { baseURL } from '@/utils/http'
import { forwardRef, useImperativeHandle } from 'react'
import { API_upFile } from '@/store/action/layout'
import { Button } from 'antd'

type Props = {
  check: boolean //表单校验，为fasle表示不校验
  isLook: boolean //是否是查看进来
  ref: any //当前自己的ref，给父组件调用
  myUrl: string //上传的api地址
  dirCode: string
  moduleId: number
  titTxt?: string
}

function ZRichTextOne(
  { check, isLook, myUrl, titTxt = '请输入内容', dirCode, moduleId }: Props,
  ref: any
) {
  const [section, setSection] = useState(BraftEditor.createEditorState(''))

  // 判断 富文本是否为空
  const isTxtFlag = useMemo(() => {
    let flag = false

    // 不是按章节发布，检查第一个富文本
    const txt = section.toText()
    const txtHtml = section.toHTML()
    const txtRes = txt.replaceAll('\n', '').replaceAll(' ', '')
    if (!txtRes && !txtHtml.includes('class="media-wrap')) flag = true

    return flag
  }, [section])

  const myInput = useRef<HTMLInputElement>(null)

  // 上传图片、视频
  const handeUpPhoto = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.target.files) {
        // 拿到files信息
        const filesInfo = e.target.files[0]

        let type = ['image/jpeg', 'image/png', 'video/mp4']
        let size = 5
        let txt = '图片只支持png、jpg和jpeg格式!'
        let txt2 = '图片最大支持5M!'

        // 校验格式
        if (!type.includes(filesInfo.type)) {
          e.target.value = ''
          return MessageFu.warning(txt)
        }

        // 校验大小
        if (filesInfo.size > size * 1024 * 1024) {
          e.target.value = ''
          return MessageFu.warning(txt2)
        }

        // 创建FormData对象
        const fd = new FormData()
        // 把files添加进FormData对象（‘photo’为后端需要的字段）
        fd.append('type', 'img')
        fd.append('dirCode', dirCode)
        fd.append('isCompress', 'true')
        fd.append('moduleId', moduleId + '')
        fd.append('file', filesInfo)

        e.target.value = ''

        try {
          const res = await API_upFile(fd, myUrl)
          if (res.code === 0) {
            MessageFu.success('上传成功')
            // 在光标位置插入图片
            const newTxt = ContentUtils.insertMedias(section, [
              {
                type: 'IMAGE',
                url: baseURL + (res.data.thumb || res.data.thumbPc)
              }
            ])

            setSection(newTxt)
          }
          fileDomInitialFu()
        } catch (error) {
          fileDomInitialFu()
        }
      }
    },
    [dirCode, moduleId, myUrl, section]
  )

  // 让父组件调用的 回显 富文本
  const ritxtShowFu = useCallback((val: any) => {
    if (val) setSection(BraftEditor.createEditorState(val))
  }, [])

  // 让父组件调用的返回 富文本信息 和 表单校验 isTxtFlag为ture表示未通过校验
  const fatherBtnOkFu = useCallback(() => {
    return { val: section.toHTML(), flag: isTxtFlag }
  }, [isTxtFlag, section])

  // 可以让父组件调用子组件的方法
  useImperativeHandle(ref, () => ({
    ritxtShowFu,
    fatherBtnOkFu
  }))

  return (
    <div className={styles.ZRichTextOne} id='ZRichTextOne'>
      <input
        id='upInput'
        type='file'
        accept='.png,.jpg,.jpeg,.mp4'
        ref={myInput}
        onChange={e => handeUpPhoto(e)}
      />

      <div className={classNames('formRightZW', isLook ? 'formRightZWLook' : '')}>
        <div className='formRightZWRR'>
          <div hidden={isLook}>
            <Button
              onClick={() => {
                myInput.current?.click()
              }}
            >
              上传图片
            </Button>
          </div>
        </div>
      </div>

      <div className={classNames('txtBox', isLook ? 'txtBoxLook' : '')}>
        <div className={classNames('zztxtRow')}>
          {/* 主体 */}
          <BraftEditor
            readOnly={isLook}
            placeholder={isLook ? '（空）' : '请输入内容'}
            value={section}
            onChange={e => setSection(e)}
            imageControls={['remove']}
          />
        </div>
      </div>
      <div className={classNames('noUpThumb', check && isTxtFlag ? 'noUpThumbAc' : '')}>
        {titTxt}
      </div>
    </div>
  )
}

export default forwardRef(ZRichTextOne)