editor-react-quill

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']]} 
  />