How to destroy inline CKEditor with jQuery

Question

Let's say that this is code I have:

<div class="editor" contenteditable></div>

// This is working for me
$('.editor').click(function(){
   $(this).ckeditor();
});

// This is the problem
$('.editor').on('focusout', function(){
   $(this).ckeditorDestroy(); // What will destroy ckeditor?
});

I know that this function doesn't exists, but I didn't found nothing what was working?

Answer 1

HTML

<div contenteditable="true" class="editor">Editor 1!</div>
<div contenteditable="true" class="editor">Editor 2!</div>

JS

CKEDITOR.disableAutoInline = true;

$( '.editor' ).click( function(){
    $( this ).ckeditor( function() {
        console.log( 'Instance ' + this.name + ' created' );
    }, {
        on: {
            blur: function( evt ) {
                console.log( 'Instance ' + this.name + ' destroyed' );
                this.destroy();
            }
        }
    } );
} );

Use editor#blur event rather than focusout or similar because i.e opening editor dialog does not mean that editor is blurred, while focusout may be fired in such case. It's much safer. More about jQuery adapter.

Answer 2

Try doing this:

$('.editor').on('focusout', function(){
   $(this).ckeditor(function(){
        this.destroy();
    });
});

Answer 3

I did it like this with ES6. For ES5, swap instance.attr("title").includes(name) with instance.attr("title").indexOf(name) !== -1;

function disableCKEDITORInstance(instance) {
    var instance = $(instance);
    instance.removeClass("selected");
    instance.attr("contenteditable", "false");
    for(name in CKEDITOR.instances) {
        if (instance.attr("title").includes(name)){
            CKEDITOR.instances[name].destroy(true);
        }
    }
}