quill-react-my

与 react 适配的 quill 编辑器

下载

npm i quill-react-my

如何使用

quill-react-my 编辑器，以下简称为 RQuill. RQuill 可以接收若干参数，其中有一个参数是必选参数：

• onChange: (val: string, textLength: number, imgs: NodeList) => void 一个回调函数，当编辑区内容发生变化时会触发，包含三个参数：val -- 编辑区的内容, textLength -- 编辑区内文本的长度, imgs -- 编辑区内的所有图片列表

以下参数均为可选参数：

• upload：(file: File) => Promise 此参数可以让用户提供自定义的文件上传逻辑，并异步返回上传后得到的文件地址
• insertImg：string 如果用户不想使用 quill 自带的 toolbar 中的图片上传，也可以自定义图片上传按钮，并将图片的地址传递进来，供 RQuill 插入图片
• placeholder：string 编辑区内容为空时展示的提示内容
• options：QuillOptionsStatic 传递给 quill 的配置项，包括 toolbar、主题、placeholder 等配置。(如果用户在 options 中配置了 placeholder，并且又传递了 placeholder 参数，则优先使用传递的 placeholder 参数) options 配置样例：

const options = {
	modules: {
	  toolbar: [
        ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
        ['blockquote', 'code-block'], // 引用，代码块
        [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2 表示字体大小
        [{ list: 'ordered' }, { list: 'bullet' }], // 列表
        [{ script: 'sub' }, { script: 'super' }], // 上下标
        [{ indent: '-1' }, { indent: '+1' }], // 缩进
        [{ direction: 'rtl' }], // 文本方向
        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
        [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
        [{ font: [] }], // 字体
        [{ align: [] }], // 对齐方式
        ['clean'], // 清除字体样式
        ['image'] // 上传图片
     ],
   },
  theme: 'snow',
  placeholder: '请描述你的问题',
}

• maxImages：number -- 最大上传图片数量，当上传的图片数量超过这个设定值时，编辑器会限制图片的插入。
• style：React.CSSProperties -- 用户自定义的样式

使用样例

const options = {
  modules: {
    toolbar: false,
  },
  theme: 'snow',
  placeholder: '请描述你的问题',
}r
export default function RQuillDemo(): ReactElement {
    const [imgUrl, setImgUrl] = useState('')
    const valueChange = (content: string, textLength: number, imgs: NodeList) => {
        contentRef.current = content
        imgsRef.current = imgs
        // console.log('text, imgs:', content, imgs)
        setStatus(`文字：${textLength}/500，图片：${imgs.length}/6`)
        if (
          textLength > 500 ||
          imgs.length > 6 ||
          (textLength === 0 && imgs.length === 0)
        ) {
          setIsBtnDisable(true)
        } else {
          setIsBtnDisable(false)
        }
    }
    // 使用quill中自带的图片上传，并重写获取图片url的逻辑
    const upload = async (file: File) => {
        const res = await uploadFile(file)
        if (res) {
            return res
        }
        return ''
    }
    return (
    	<RQuill
            onChange={valueChange}
            options={options}
            upload={upload}
            insertImg={imgUrl}
            maxImages={6}
            placeholder="请描述你遇到的问题"
          />
    )
}