如何在編輯完成時關閉套筒編輯器

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"。