javascript - 编辑后删除 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 ) );