编辑后删除 CKEditor 实例

Question

我正在使用 JQuery 将 CKEditor 实例（点击事件）动态添加到我的页面的某些元素中。

问题 1： 如果元素已经被点击，它们已经有一个附加的 CKEditor 实例，这会在尝试创建一个新实例时导致错误。

问题 2：我在这些元素上没有id，所以不知道名称 CKeditor 实例。在这种情况下，它们将是automatically generated，跟随一个渐进式计数器，如“editor1”、“editor2”等。

所以我不能按名称删除实例，并且删除每个点击事件上的所有实例似乎不是一个正确的解决方案。

问题：我想在编辑完元素后立即删除 CKEditor 实例。如果单击元素上的实例已经存在（不知道实例名称），则在（重新）创建它之前删除它的任何其他建议。

Answer 1

考虑以下 HTML：

<div class="foo">Hello!</div>    
<div class="foo">World!</div>    

您可以使用这种方法基于div 元素动态创建编辑器实例。一旦实例被模糊，它就会被销毁，但任何后续点击 div 都会创建一个新实例：

function attachEditorToElement( element ) {
    element.once( 'click', function() {
        CKEDITOR.replace( element, {
            height: 100,
            plugins: 'wysiwygarea,toolbar,basicstyles',
            on: {
                instanceReady: function() {
                    // Focus the instance immediately.
                    this.focus();
                },
                blur: function() {
                    // Save the reference to element.
                    var el = this.element;

                    this.destroy();

                    // A new instance will be created if div is clicked.
                    // Note that this is a different element than the one passed to attachEditorToElement.
                    attachEditorToElement( el );
                }
            }
        } );
    } );
}

var divs = CKEDITOR.document.find( 'div.foo' );

// Create editor instances when div is clicked.
for ( var i = divs.count(); i--; )
    attachEditorToElement( divs.getItem( i ) );

---

内联方式：

CKEDITOR.disableAutoInline = true;

function attachEditorToElement( element ) {
      element.once( 'click', function() {
        if ( element.getEditor() )
                return;

        element.setAttribute( 'contenteditable', true );

        CKEDITOR.inline( element, {
            plugins: 'floatingspace,toolbar,basicstyles',
            on: {
                instanceReady: function() {
                    // Focus the instance immediately.
                    this.focus();
                },
                blur: function() {
                    var el = this.element;
                    el.removeAttribute( 'contenteditable' );

                    this.destroy();

                    attachEditorToElement( el );
                }
            }
        } );
    } );
}

var divs = CKEDITOR.document.find( 'div.foo' );

// Create editor instances when div is clicked.
for ( var i = divs.count(); i--; )
    attachEditorToElement( divs.getItem( i ) );