如何在 react-quill 中使用 quill-better-table答案

【问题标题】：How to use quill-better-table inside react-quill如何在 react-quill 中使用 quill-better-table
【发布时间】：2020-05-19 11:30:08
【问题描述】：

我正在尝试使用 quill-better-table 库将表插入到 react-quill 中。我注意到这里有一个相关的纯 js 示例：https://codepen.io/soccerloway/pen/WWJowj 使用函数 quill.getModule('better-table') 来获取模块，然后插入表格。我尝试使用 react-quill 和 react-quill-with-table 来执行此操作，但未定义该函数。库的 react 版本可以与 quill-better-table 一起使用吗？

import ReactQuill, { Quill, Mixin, Toolbar } from 'react-quill-with-table'; // ES6
import QuillBetterTable from "quill-better-table";

export default function MyQuillTextEditor(props) {

const modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
    table: false, // disable table module
    "better-table": {
        operationMenu: {
            items: {
                unmergeCells: {
                 text: "Another unmerge cells name"
            }
         }
       }
     },
   keyboard: {
     bindings: QuillBetterTable.keyboardBindings
   }
  }

const  formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]

let editor = null;

const addTable = (e) => {
    e.preventDefault();
    Quill.getModule("better-table");
}


return (
    <div>
          <ButtonGroup size="small" aria-label="small button group">
                            <Button onClick>Add Row</Button>
                            <Button>Add Column</Button>
                            <Button>Delete Table</Button>
                            <Button onClick={(event) =>addTable(event)}>Add Table</Button>
                        </ButtonGroup>
        <ReactQuill theme="snow"
            ref={(el) =>{editor = el}}
            modules={modules}
            formats={formats}
            theme="snow"
            >

        </ReactQuill>
    </div>
   )
}

【问题讨论】：

标签： reactjs quill react-quill

【解决方案1】：

目前，您不能将 quill-better-table 与 react-quill 一起使用。

您可以在这里查看更多信息： https://github.com/soccerloway/quill-better-table/issues/42

【讨论】：

【解决方案2】：

我有同样的问题，现在我已经解决了。你可以试试

Quill.getModule("better-table");

到

 this.quillRef.getEditor().getModule('better-table');

和

<ReactQuill theme="snow"
    ref={(el) =>{editor = el}}
    modules={modules}
    formats={formats}
    theme="snow"
    >

到

 <ReactQuill theme="snow"
    ref={(el) =>{this.quillRef = el}}
    modules={modules}
    formats={formats}
    theme="snow"
    >

【讨论】：