1.0.5 • Published 3 years ago

quill-react-my v1.0.5

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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="请描述你遇到的问题"
          />
    )
}
1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago