react中如何使用quill-better-table

首先，要安装quill-better-table依赖。

npm install quill-better-table --save

然后，在React组件中引入Quill和quill-better-table：

import React, { useEffect, useRef } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import { BetterTable } from 'quill-better-table';

Quill.register('modules/better-table', BetterTable);

接着，在组件中创建一个Quill实例，并为其添加better-table模块：

const QuillEditor = () => {
  const quillRef = useRef(null);

  useEffect(() => {
    if (quillRef.current) {
      const quill = new Quill(quillRef.current, {
        modules: {
          formula: true,
          betterTable: {
            operationMenu: {
              items: {
                unmergeCells: {
                  text: '取消合并',
                  icon: {
                    name: 'close',
                    svg: true,
                  },
                  visible: () => true,
                  action: (table) => {
                    table.mergeSelectedCells(false);
                  },
                },
              },
            },
          },
        },
        placeholder: '请输入内容...',
        theme: 'snow',
      });
    }
  }, []);

  return (
    <div className='editor' ref={quillRef}></div>
  );
};

这里配置了betterTable模块的操作菜单，包括取消合并单元格。

最后，在组件中使用QuillEditor即可。

const App = () => {
  return (
    <div className='app'>
      <QuillEditor />
    </div>
  );
};