編集を完了したらquillエディタを閉じるには

Question

DOMの要素のクリックイベントでQuillJSエディタを動的にインスタンス化しています。だから私の要件は、ユーザーがその要素の編集を完了すると、彼/彼女はエディタを閉じることができるはずです。現在、quill APIにはcloseメソッドはありません。エディタを完全に閉じて、クイルエディタを表示する前と同じビューをユーザに表示したいが、もちろん保存された変更を表示したいので、APIメソッドを有効/無効にすることはできません。

これのデモは、コンテンツのdivにcontenteditable="false"を設定することによって、ここに
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の書式と独自の書式との区別を表示しないようにします。

私のユースケースは、エディタを閉じるために必要なため、私は、基本的な変更

.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

あなたが試すことができます見ることができます。