如何在编辑完成时关闭套筒编辑器

Question

我在DOM中的元素的单击事件中动态实例化QuillJS编辑器。所以我的要求是，一旦用户完成了该元素的编辑，他/她应该能够关闭编辑器。目前，我没有在羽毛球API中看到任何关闭方法。启用/禁用API方法不适用于我，因为我想完全关闭编辑器并向用户显示他/她在查看编辑器之前所看到的相同视图，当然还有保存的更改。

这样做的演示可以在这里
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; 
} 

Answer 1

我建议之一：

1. 复制鹅毛笔实例的内容，摧毁该实例绑定到DOM元素，创建一个新的DOM元素和
2. 使用的内容粘贴回如已经尝试的那样通过API禁用，但也禁用样式的Quill实例，以显示Quill的格式与您自己的格式之间的区别。

我已经更新了你的笔here给予基本的变化

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

Answer 2

您可以尝试通过看到的内容格设置contenteditable="false"。