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?

Sackbut

possible duplicate of Remove all CKEditor instances – Guanase

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.

Tamarau

Answer 2

Try doing this:

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

Marras

You made something that worked exactly as I wanted: "this.ckeditor... this destroy". – Asher

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

Wandawander