componentDidMount() {
const toolbarOptions = [];
const quill = new Quill(".ql-editor", {
modules: {
toolbar: [
[{ size: ["small", false, "large", "huge"] }],
[{ header: 1 }, { header: 2 }],
[{ color: [] }, { background: [] }],
["bold", "italic", "underline", "strike"],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ direction: "rtl" }],
["blockquote", "code-block"],
[{ align: [] }],
toolbarOptions,
["image", "code-block"],
["clean"]
]
},
syntax: true,
readOnly: false,
placeholder: "write the content here..",
theme: "snow"
});
quill.on("text-change", function(eventName, ...args) {
document.getElementById("preview").innerHTML = quill.root.innerHTML;
});
}