How to destroy inline CKEditor with jQuery

问题

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?

回答1:

HTML

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

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.

回答2:

Try doing this:

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

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

来源：https://stackoverflow.com/questions/24533286/how-to-destroy-inline-ckeditor-with-jquery

标签

jquery

ckeditor

destroy