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;
Top comments (0)