quill编辑器使用

• 官方git： https://github.com/quilljs/quill/
• 官方文档：https://quilljs.com/
• 中文文档：https://kang-bing-kui.gitbook.io/quill/

编辑器是个正经编辑器，就是文档太不正经了

基本的一些使用文档还是可以的，基础用例代码如下

import React, { useEffect } from 'react';
import Quill, { QuillOptionsStatic } from 'quill';
import 'quill/dist/quill.snow.css';
import { TranslatorWrapper } from './translator';

const QuillEditor = () => {
  useEffect(() => {
    const toolbarOptions = [
      [{ header: [false, 1, 2, 3, 4, 5, 6] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ align: '' }, { align: 'center' }, { align: 'right' }],
      ['link'],
      ['image'],
    ];
    const options: QuillOptionsStatic = {
      // boundsDOM元素或者一个DOM元素的css选择器，其中编辑器的UI元素（例如：tooltips）应该被包含其中。目前，只考虑左右边界 
      // 这个属性很管用，特别是在一些布局中，不设置边界的话，ql-tooltip会溢出编辑器，导致被遮挡，并且有些时候，布局已经确定，z-index都不能这解决遮挡问题
      bounds: document.getElementById('quill_editor') as HTMLElement,
      debug: 'false',
      modules: {
        imageUpload: true,
        toolbar: toolbarOptions,
      },
      placeholder: '',
      theme: 'snow',
    };
    const editor = new Quill('#quill_editor', options);
    setQuillEditor(editor);
  }, []);

  return (
    <TranslatorWrapper>
      <div id="quill_editor"></div>
    </TranslatorWrapper>
  );
};

export default QuillEditor;

基本样例展示: