good-quill v1.0.1

GoodQuill

一个好用的移动端 react quill 富文本编辑器,支持文本操作，图片插入等常用功能。支持自定义传入样式、文字和图片数量限制、可手动打开关闭工具栏。

使用方法 (以 React 项目为例)

// 引用

import { useState, useRef } from 'react'
import GoodQuill from 'good-quill/dist/GoodQuill'

const Demo = () => {
  const [content, setContent] = useState('')
  const [textLength, setTextLength] = useState(0)
  const [insertDisabled, setInsertDisabled] = useState(false)
  const [imgLength, setImgLength] = useState(0)
  const [imgURL, setImgURL] = useState('')
  return (
    <GoodQuill
      style={{ width: '100%', flex: 1, height: '100%', overflowY: 'auto' }}
      imgURl={imgURL}
      handleSetTextLength={(textLength: number) => setTextLength(textLength)}
      handleSetImgLength={(imgLength: number) => setImgLength(imgLength)}
      handleSetInsertDisabled={(stat: boolean) => setInsertDisabled(stat)}
      placeholder={'XXXXXXX'}
      onChange={(value: string) => setContent(value)}
    />
  )
}

支持传入的参数

interface IEditorProps {
  placeholder?: string //占位符文本内容，不传默认显示 “请输入内容”
  theme?: string // 主题样式 与Quill保持一致
  openToolbar?: boolean // 是否打开工具栏  默认false
  imgURl: string  // 图片回显的url地址
  textLimit?: number  // 输入文本内容长度限制
  imgLimit?: number // 插入图片长度限制
  handleSetTextLength?: (textLength: number) => void // 返回当前输入的文本字符数量
  handleSetImgLength?: (imgLength: number) => void // 返回当前插入的图片数量
  handleSetInsertDisabled?: (stat: boolean) => void // 调用此函数随时禁用插入图片功能
  handleSetSubmit?: (stat: boolean) => void // 调用此函数随时禁用编辑器发布功能
  onChange: (value: string) => void // 返回编辑器内容
  style?: React.CSSProperties // 自定义编辑器样式
}