How to close the quill editor when done with editing

Question

I am dynamically instantiating the QuillJS editor on a click event of an element in the DOM. So my requirement is that once the user is done with the editing for that element, he/she should be able to close the editor. Currently, I do not see any close method in the quill API. The enable/disable API methods won't work for me as I want to close the editor completely and show the user the same view he/she had before seeing the quill editor but of course with the saved changes.

The demo of this can be seen here
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

I'd advise either:

1. Copy the contents of the quill instance, destroy the DOM element that the instance is bound to, create a new DOM element and paste the contents back in
2. Use disable via the API as you've already tried, but also style disabled Quill instances to not show any differentiation between Quill's formatting and your own.

I've updated your pen here to give an example of the second option with basic changes

.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

This work for me:

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

To use it just call:

destory_editor('.editor');

Answer 4

On the latest version (and perhaps previous versions) the ql-toolbar is always the previousSibling of the quill editor. So removing the toolbar becomes as simple as;

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

This has the benefit of "disposing" one editor at a time.