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?

possible duplicate of [Remove all CKEditor instances](http://stackoverflow.com/questions/11687627/remove-all-ckeditor-instances) — Wez, Jul 02 '14 at 14:09

oleq · Accepted Answer · 2014-07-02T14:53:03.683

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.

score 2 · Answer 2 · answered Jul 02 '14 at 14:14

2

Try doing this:

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

answered Jul 02 '14 at 14:14

Rob Schmuecker

8,934
2
18
34

You made something that worked exactly as I wanted: "this.ckeditor... this destroy". – Rafael Moni Feb 09 '17 at 18:44

score 1 · Answer 3 · answered Mar 29 '18 at 18:44

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

How to destroy inline CKEditor with jQuery

3 Answers3

Linked