React Rich Text Editor in the SharePoint Framework (SPFx) web part

This article explains how to integrate a React Rich Text Editor into a SharePoint Framework (SPFx) web part using ReactQuill.
This lightweight editor allows users to enter and save formatted text within SharePoint lists easily.

⚙️ Install Dependencies

Install the required dependencies:

npm install react-quill --save
npm install @pnp/sp --save
npm install office-ui-fabric-react --save

🧩 Configure SPFx Context

In your main component constructor, set up the PnP JS context:

sp.setup({ spfxContext: this.props.context });

🪄 Implement the React Component

Here’s the full implementation of the ReactQuill Rich Text Editor integrated with a SharePoint list.

import * as React from 'react';
import styles from './SpfxReactRichtext.module.scss';
import { ISpfxReactRichtextProps } from './ISpfxReactRichtextProps';
import { ISpfxReactRichtextState } from './ISpfxReactRichtextState';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { PrimaryButton, autobind } from 'office-ui-fabric-react';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

export default class SpfxReactRichtext extends React.Component<ISpfxReactRichtextProps, ISpfxReactRichtextState> {
  constructor(props: ISpfxReactRichtextProps, state: ISpfxReactRichtextState) {
    super(props);
    sp.setup({ spfxContext: this.props.context });
    this.state = { title: '', reactrichtext: '', place: '' };
    this._getValuesFromSP();
  }

  public render(): React.ReactElement<ISpfxReactRichtextProps> {
    return (
      <div className={styles.spfxReactRichtext}>
        <TextField label="Name" value={this.state.title} onChanged={(newtext) => this.setState({ title: newtext })} />
        <br />
        <label>React Rich Text Editor</label>
        <ReactQuill
          value={this.state.reactrichtext}
          theme="snow"
          modules={modules}
          formats={formats}
          onChange={(newvalue) => this.setState({ reactrichtext: newvalue })}
        />
        <TextField label="Place" value={this.state.place} onChanged={(newtext) => this.setState({ place: newtext })} />
        <br />
        <PrimaryButton text="Save" onClick={this._SaveIntoSP} />
      </div>
    );
  }

  private async _getValuesFromSP() {
    const item: any = await sp.web.lists.getByTitle("ReactRichText").items.getById(1).get();
    this.setState({ title: item.Title, reactrichtext: item.ReactRichText, place: item.Place });
  }

  @autobind
  private async _SaveIntoSP() {
    let list = sp.web.lists.getByTitle("ReactRichText");
    await list.items.getById(1).update({
      Title: this.state.title,
      ReactRichText: this.state.reactrichtext,
      Place: this.state.place
    });
  }
}

const modules = {
  toolbar: [
    [{ 'header': [1, 2, false] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
    ['link'],
    ['clean']
  ]
};

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

🧠 Configure SharePoint List

Create a SharePoint list named ReactRichText with the following columns:

Title (Single line of text)
ReactRichText (Multiple lines of text — Enhanced rich text)
Place (Single line of text)

🚀 Build and Deploy

Run the following commands to build and deploy the solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog, deploy it, and add the web part to a modern SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:React Rich Text Editor in the SharePoint Framework (SPFx) Web Part

GitHub

✅ Summary

Using ReactQuill with SPFx and PnP JS allows developers to easily capture and store formatted text directly in SharePoint lists.
This approach provides a lightweight and flexible solution for content-rich intranet pages.