README

editor-react-quill

一个基于quill 的 react组件 Editor

使用 npm i editor-react-quill 或 yarn add editor-react-quill

// 在React 项目中快速使用
import { Editor } from 'editor-react-quill'
const show = (content: string, textLen: number, imgsLen: number) => {
    console.log(content, textLen, imgsLen)
}
function Demo() {
    // onChange为必传参数
    return <div>
        <Editor onChange={show}/> 
    </div>
}

API

Name	Description	Type	Default
onChange	实时获取编辑器的内容content,以及内容的文字长度textLen,图片数量imgsLen	`(content: string, textLen: number, imgsLen: number) => void`	-
onError	用于接收图片格式错误msg的提示	`(msg: string) => void`	-
placeholder	编辑器的placeholder	`string`	`'请在这里输入内容'`
clearable	是否开启清空按钮	`boolean`	`false`
theme	主题theme	`'snow'丨'bubble'`	`'snow'`
clipboard	是否过滤剪切板的内容为纯文字	`boolean`	`true`
toolBar	是否开启toolBar, 默认关闭false, 也可自定义	`any[][]丨boolean`	`false`
upload	在打开toolbar 的 image 的基础上，是否自定义上传图片的函数	`(file: File) => Promise<string丨{status: number, target: string}>`	-
maxLength	文字最大长度	`number`	`1000`
maxImages	图片最大数量	`number`	`6`

toolBar 常用配置

更多配置

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'] // 上传图片
]}

注意

// 如果想自定义上传图片的方法请同时传入toolBar和upload
<Editor 
    onChange={show} 
    upload={yourFunc} 
    toolBar={[['image']]} 
/>

Usage no npm install needed!

README

editor-react-quill