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

编辑后删除CKEditor实例

1 个答案: