componentDidMount()

in plugins/richtext/src/RichText.tsx [84:130]


  componentDidMount() {
    const { quillEditorId } = this.state;
    const { quillOptions = {}, maxHeight, minHeight, changeHandle, resFormat, srcFormat } = this.options
    const toolbarHandlers = {
      undo: () => {
        this._quill.history.undo()
      },
      redo: () => {
        this._quill.history.redo()
      }
    }
    this._quill = new Quill(`#${quillEditorId}`, Object.assign({
      theme: 'snow',
      placeholder: '请点击此处开始编辑...',
      modules: {
        toolbar: {
          container: [{ size: fontSizeStyle.whitelist }, 'bold', 'italic', 'underline', 'strike', { 'align': [] }, { list: 'ordered' }, { list: 'bullet' }, { 'color': [] }, { 'background': [] }, 'link',
            'clean', 'undo', 'redo'
          ],
          handlers: toolbarHandlers
        }
      },
    }, quillOptions));
    const initValue = srcFormat(this.getValue())
    const contentId = document.getElementById(quillEditorId)

    if (initValue) this._quill.root.innerHTML = initValue;
    // @ts-ignore
    if (maxHeight) contentId.firstElementChild.style['max-height'] = maxHeight
    // @ts-ignore
    if (minHeight) contentId.firstElementChild.style['min-height'] = minHeight

    this._quill.on('text-change', (delta, oldDelta, source) => {
      const htmlStr = !this._quill.root.innerHTML || this._quill.root.innerHTML === '<p><br></p>' ? '' : this._quill.root.innerHTML
      this.changeValue(resFormat(htmlStr));
      changeHandle(resFormat(htmlStr));
    });

    this._quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
      delta.ops = delta.ops.map(op => {
        return {
          insert: op.insert
        };
      });
      return delta;
    });
  }