SPFx项目中，需用哪个组件（来自哪个包）实现带表格创建的富文本编辑器？

1. 使用 @pnp/spfx-controls-react 中的 RichTextEditor 组件 #

你之前使用的RichText组件仅支持基础编辑/展示能力，同包内的RichTextEditor基于Quill.js开发，默认支持表格创建功能（需确保安装的是较新版本的@pnp/spfx-controls-react）。

• 包依赖：@pnp/spfx-controls-react
• 基础使用示例：

import { RichTextEditor } from '@pnp/spfx-controls-react/lib/RichTextEditor';

// 在你的SPFx组件渲染方法中
<RichTextEditor
  value={this.state.editorContent}
  onChange={(newValue) => this.setState({ editorContent: newValue })}
  toolbarConfig={{
    // 自定义工具栏，显式包含表格按钮
    toolbar: [['bold', 'italic'], ['table']]
  }}
/>

如果当前版本不支持表格，执行npm update @pnp/spfx-controls-react升级到最新版即可。

2. 直接集成 react-quill + 表格插件 #

如果需要更灵活的自定义能力，可以直接集成react-quill，并通过第三方插件扩展表格功能：

• 所需包：react-quill、quill、quill-better-table
• 步骤：
  1. 安装依赖：

  npm install react-quill quill quill-better-table --save
  

  2. 在SPFx组件中配置并使用：

  import * as React from 'react';
  import ReactQuill from 'react-quill';
  import 'react-quill/dist/quill.snow.css';
  import Quill from 'quill';
  import QuillBetterTable from 'quill-better-table';
  
  // 注册表格插件
  Quill.register('modules/better-table', QuillBetterTable);
  
  export default class CustomRichTextEditor extends React.Component<{}, { content: string }> {
    constructor(props) {
      super(props);
      this.state = { content: '' };
    }
  
    private handleChange = (value: string) => {
      this.setState({ content: value });
    };
  
    private modules = {
      table: {
        operationMenu: {
          items: {
            insertRowAbove: true,
            insertRowBelow: true,
            insertColumnLeft: true,
            insertColumnRight: true,
            deleteRow: true,
            deleteColumn: true,
            deleteTable: true,
          },
        },
      },
      toolbar: [['bold', 'italic'], ['table']],
    };
  
    public render(): React.ReactElement<{}> {
      return (
        <ReactQuill
          theme="snow"
          value={this.state.content}
          onChange={this.handleChange}
          modules={this.modules}
        />
      );
    }
  }
  

内容的提问来源于stack exchange，提问作者private7