weinisi-react-quill
项目打包
# 查看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