Which component do you use to render RichText field?

Question

Which component (from which package) do you use to build rich text editor with support for table creation for your SPFx projects?

So far I found "@pnp/spfx-controls-react/lib/RichText" but it doesn't have support for table creation

Answer 1

You can use react-quill component which does have support for table as well.

You can find samples at below link:

• React Quill Examples and Templates
• React-Quill example with table

Hope it will helpful to you.

Answer 2

To add table creation support to your rich text editor, you can consider using additional third-party libraries or components.

As mentioned by @Jitendra in his response above, you can use the react-quill library, which provides a rich text editor component with extensive features, including table creation capabilities.

To use react-quill in your SPFx project, you'll need to install the necessary dependencies. Here are the steps:

1. Install the required packages by running the following command in your SPFx project's root directory:

   npm install react-quill quill
   

2. Import the necessary modules in your component file:

   import ReactQuill from 'react-quill';
   import 'react-quill/dist/quill.snow.css';
   

3. Use the ReactQuill component in your code, providing appropriate props and configuring it to enable table creation:

   <ReactQuill
     value={this.state.editorContent}
     onChange={this.handleEditorChange}
     modules={{
       toolbar: {
         container: [
           [{ header: [1, 2, false] }],
           ['bold', 'italic', 'underline', 'strike', 'blockquote'],
           [{ list: 'ordered' }, { list: 'bullet' }],
           ['link', 'image', 'video'],
           ['table'], // Add table button to the toolbar
           ['clean'],
         ],
       },
       clipboard: {
         matchVisual: false,
       },
     }}
     formats={[
       'header',
       'bold',
       'italic',
       'underline',
       'strike',
       'blockquote',
       'list',
       'bullet',
       'link',
       'image',
       'video',
       'table', // Enable table format
     ]}
   />
   

With the react-quill library, you can leverage the table format option and the table button in the toolbar configuration to enable table creation within your rich text editor.

You can refer to the following article for a detailed example and code implementation: Rich Text Control in SPFx using React-Quill.

Source: Rich Text Control in SPFx using React-Quill