[英]How to close the quill editor when done with editing
我在 DOM 中元素的单击事件上动态实例化 QuillJS 编辑器。 所以我的要求是,一旦用户完成对该元素的编辑,他/她应该能够关闭编辑器。 目前,我在 quill API 中没有看到任何关闭方法。启用/禁用 API 方法对我不起作用,因为我想完全关闭编辑器并向用户显示他/她在看到 quill 编辑器之前的相同视图但当然还有保存的更改。
这个的演示可以在这里看到
https://codepen.io/curiousdj/pen/eEjbPK
const options = { theme: "snow" };
var divs = document.getElementsByTagName("div");
var initializeQuill = function (e){
if(!this.quill){
console.log(e);
this.target = event.currentTarget;
this.quill = new Quill(this.target, options);
this.target.children[0].onclick = function(et) { et.preventDefault(); };
this.target.children[0].onblur = function(l) {
l.target.parentElement.quill.close;
};
}
this.quill.focus();
e.stopPropagation();
e.preventDefault();
}
for(var i = 0; i < divs.length; i++){
divs[i].onclick = initializeQuill;
}
我建议:
.ql-editor {
padding:0;
line-height:inherit;
}
.ql-editor p {
margin-bottom:10px;
}
.ql-toolbar {
display:none;
}
.ql-container.ql-snow {
border:none;
font-family:inherit;
font-size:inherit;
}
您可以通过在内容 div 上设置contenteditable="false"
来尝试。
这对我有用:
function destory_editor(selector){
if($(selector)[0])
{
var content = $(selector).find('.ql-editor').html();
$(selector).html(content);
$(selector).siblings('.ql-toolbar').remove();
$(selector + " *[class*='ql-']").removeClass (function (index, css) {
return (css.match (/(^|\s)ql-\S+/g) || []).join(' ');
});
$(selector + "[class*='ql-']").removeClass (function (index, css) {
return (css.match (/(^|\s)ql-\S+/g) || []).join(' ');
});
}
else
{
console.error('editor not exists');
}
}
要使用它,只需调用:
destory_editor('.editor');
在最新版本(也许是以前的版本)上, ql-toolbar
始终是 quill 编辑器的previousSibling
。 所以删除工具栏变得很简单;
document.getElementById("editor element id").previousSibling.remove();
这具有一次“处理”一个编辑器的好处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.