handleChange (html) { var limit = this.props.maxLength; var quill = this.quillRef; quill.on('text-change', function (delta, old, source) { if (quill.getLength() > limit) { quill.deleteText(limit, quill.getLength()); } }); this.props.handleChange(html); }
componentDidMount() { this.quill = new Quill('#description', { theme: 'snow', modules: { syntax: true, toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block', 'link'], [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean'] ] } }); if (this.props.mode === 'update') { this.quill.setContents(JSON.parse(this.state.description)); } }
async save() { const { draft, name, start_date, end_date, input, output } = this.state; const description = JSON.stringify(this.quill.getContents()); let url; if (this.props.mode === 'create') { url = '/admin/contests/create'; } if (this.props.mode === 'update') { url = '/admin/contests/update/' + this.props.contest_id; } let res = await axios .post(url, { draft, name, description, start_date, end_date, input, output }); location = '/admin/contests'; }
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; }); }