Question

让我们说这是我的代码：

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

我知道这个功能不存在，但我没有发现什么工作？

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

使用editor#blur事件而不是focusout或类似事件，因为打开编辑器对话框并不意味着编辑器模糊，而在这种情况下可能会触发focusout。它更安全。 More about jQuery adapter

Answer 2

尝试这样做：

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

Answer 3

我用ES6这样做了。对于ES5，请将instance.attr("title").includes(name)与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);
        }
    }
}

如何使用jQuery销毁内联CKEditor

3 个答案: