Quill: Destroy editor instance

[emanuelbsilva]

I know from other issues that a destroy method was implemented, but that isn't in the current beta version.

What is the correct way to destroy an editor instance?

Thank you,
Emanuel Silva

[jhchen]

An explicit destroy is no longer necessary as Quill no longer keeps track of all editor instances. Just remove references to the instance and remove from the DOM and it will be garbage collected.

[emanuelbsilva]

So, there are no listeners that need to be removed? That's great! Thanks

[sachinrekhi]

I'd suggest adding this to the list of removed APIs in the Upgrading to 1.0 Guide

[jhchen]

Thanks the docs have been updated

[mhdhamouday]

This work for me: (JQuery required)

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, class_name) {
           return (class_name.match (/(^|\s)ql-\S+/g) || []).join(' ');
        });

        $(selector + "[class*='ql-']").removeClass (function (index, class_name) {
           return (class_name.match (/(^|\s)ql-\S+/g) || []).join(' ');
        });
    }
    else
    {
        console.error('editor not exists');
    }
}

To use it just call:

destory_editor('.editor');

[guptanisha]

Thanku @mhdhamouday.

In my case didn't remove 'svg' tag, hence it rendered polygon.

I tried this.

$(editor).find( "svg" ).removeClass('.ql-stroke')

Any help appreciated.

This work for me: (JQuery required)

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

[mhdhamouday]

Thanku @mhdhamouday.

In my case didn't remove 'svg' tag, hence it rendered polygon.

I tried this.

$(editor).find( "svg" ).removeClass('.ql-stroke')

Any help appreciated.

This work for me: (JQuery required)

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

It should delete "ql-stroke" because it is in the toolbar that we deleted.

Here you should delete point before class name so it will be:
$(editor).find( "svg" ).removeClass('ql-stroke');