如何使用 jQuery 销毁内联 CKEditor答案

【问题标题】：How to destroy inline CKEditor with jQuery如何使用 jQuery 销毁内联 CKEditor
【发布时间】：2014-08-23 08:56:06
【问题描述】：

假设这是我的代码：

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

我知道这个功能不存在，但我什么也没找到？

【问题讨论】：

Remove all CKEditor instances的可能重复

标签： jquery ckeditor destroy

【解决方案1】：

尝试这样做：

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

【讨论】：

你制作的东西完全符合我的要求：“this.ckeditor...this destroy”。

【解决方案2】：

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

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

【讨论】：

【解决方案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);
        }
    }
}

【讨论】：