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; }); }