weinisi-react-quill

项目打包

• 本项目基于gulp进行打包操作

# 查看gulp配置的所有命令
npx gulp -T
# 项目打包
yarn build

使用方法

import { useState, useRef } from 'react'
import { Quill as ReactQuill } from 'weinisi-react-quill'
import { uploadFile } from '@/libs/auth'

const Demo = () => {
  const fileNode = useRef<HTMLInputElement>(null)
  const [disabled, setDisabled] = useState(false)
  const [text, setText] = useState('')
  const addImg = () => {
    fileNode.current?.click()
  }
  return (
    <ReactQuill
      uploadFile={uploadFile}
      setSubmitDisabled={setDisabled}
      setText={setText}
      onAddImg={addImg}
      fileNode={fileNode}
    />
  )
}

Props属性

interface Props {
  options?: QuillOptionsStatic // quill编辑器选项
  TEXTMAX?: number // 字数上限，默认500
  IMGSMAX?: number // 图片上限，默认6
  fileNode: React.RefObject<HTMLInputElement> // 上传文件input框ref
  uploadFile(file: File): Promise<string | void> // 上传文件api
  onAddImg: () => void // 上传图片按钮点击事件
  setSubmitDisabled: React.Dispatch<React.SetStateAction<boolean>> // 是否可以发布
  setText: React.Dispatch<React.SetStateAction<string>> // 富文本编辑器内容
}

// options默认值
const {
  options = {
    modules: {
      toolbar: false
    },
    theme: 'snow', // 不可修改主题
    placeholder: '请输入内容'
  }
} = Props