完成編輯后如何關閉羽毛筆編輯器

Question

我在 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;
}

Answer 1

我建議：

1. 復制 quill 實例的內容，銷毀實例綁定的 DOM 元素，創建一個新的 DOM 元素並將內容粘貼回
2. 正如您已經嘗試過的那樣，通過 API 使用 disable，但也要設置禁用的 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

您可以通過在內容 div 上設置contenteditable="false"來嘗試。

Answer 3

這對我有用：

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');

Answer 4

在最新版本（也許是以前的版本）上， ql-toolbar始終是 quill 編輯器的previousSibling 。 所以刪除工具欄變得很簡單；

document.getElementById("editor element id").previousSibling.remove();

這具有一次“處理”一個編輯器的好處。