DEV Community

Cover image for Adding Quill Module into ReactQuill in React App TS
Ruslan Novikov
Ruslan Novikov

Posted on

Adding Quill Module into ReactQuill in React App TS

In this example, I'm importing the htmlEditButton module into Quill. There are example of my component

import React, { Dispatch, FC, SetStateAction } from "react";
import htmlEditButton from "quill-html-edit-button";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";
import style from "./QuillEditor.module.scss";

const QuillEditor: FC<{
  richText?: string;
  setRichText: Dispatch<SetStateAction<string>>;
}> = ({ setRichText, richText }) => {
  Quill.register({
    "modules/htmlEditButton": htmlEditButton,
  });

  return (
    <ReactQuill
      className={style.wrapper}
      modules={{
        toolbar: [
          ["bold", "italic"],
          [{ color: [] }],
          [{ list: "ordered" }, { list: "bullet" }],
          [{ indent: "-1" }, { indent: "+1" }, { align: [] }],
          ["link"],
        ],
        htmlEditButton: { debug: false, syntax: false },
      }}
      theme="snow"
      onChange={setRichText}
      value={richText}
    />
  );
};

export default QuillEditor;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)