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

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