pnpm add @base-stone/editor https://unpkg.com/@base-stone/editor

常规项目代码目录

├── main.tsx
    

Editor 使用

import { type FC, Ref, memo } from 'react'
import { App } from 'antd'
import Editor from '@base-stone/editor'
import '@base-stone/editor/dist/design-editor.css'


interface Props {
  ref: Ref<any>
  readOnly?: boolean
  defaultValue: string | undefined
  onEditorChange: (value: string) => void
}

const QuillEditor: FC<Props> = memo((props) => {
  const { ref, readOnly, defaultValue, onEditorChange } = props
  const { message } = App.useApp()

  const uploadEditorImage = async (file: File, quill) => {
    const isOversize = file.size > 10 * 1024 * 1024
    if (isOversize) {
      message.warning('只能为10MB以内')
      return false
    }
    const formData = new FormData();
    formData.append('file', file);
    const response = await fetch('/api/upload/image',{
      method: 'POST',
      body: formData
    })
    if (response.ok) {
      const { status } = await response.json()
      if (status === 'success') {
        const range = quill.getSelection()
        quill.insertEmbed(range.index, 'image', `/api/file/download/${data.fileToken}`)
      }
    } else {
      console.error('上传失败:', response.status)
    }
  }

  return (
    <Editor
      ref={ref}
      readOnly={readOnly}
      defaultValue={defaultValue}
      onEditorChange={onEditorChange}
      onImageUpload={uploadEditorImage}
    ></Editor>
  )
})