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