Question

我正在使用带有多个div元素的JQuery inline CKeditor和onchange插件，以便在更改时通过ajax保存数据。使用静态div元素时一切正常。但我想在按钮点击时更改div元素，我使用的是返回html的ajax。加载的动态div元素CKEDITOR.on('instanceCreated', function (e) {});不起作用时。这个过程出了什么问题？

Answer 1

我在我的一个项目中使用了这个方法。因此，在将内容添加到DOM后调用ckeditor函数。与此类似：

function ckeditor(elem) {
  try {
    CKEDITOR.disableAutoInline = true;
    var editor = CKEDITOR.inline(elem.get(0), {
        toolbar: [{
            name: 'basicstyles',
            items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Link', 'Unlink', 'TextColor', 'BGColor']
        }],
    });
   } catch (err) {
    //catch error if any
   }
}

此处elem将是您想要ckeditor的jquery选择器元素。

我建议的另一种方法是：

$(document).on('focus','your-selector',function(){
 var elem = $(this);
//Your ckeditor code goes here.
});

我没有尝试过这种方法，但你可以尝试一下。

Answer 2

instanceCreated事件的一切都没问题。请参阅此JSFiddle。

HTML

<button type="button" onclick="newEditor()">Create new editor</button>

JS

CKEDITOR.on( 'instanceCreated', function( evt ) {
    console.log( 'instanceCreated', evt, evt.editor );
} );

function newEditor() {
    // This HTML could've come from AJAX data.
    var el = CKEDITOR.dom.element.createFromHtml( '<div contenteditable="true">Hello world</div>' );
    CKEDITOR.document.getBody().append( el );

    // Create editor instance on the new element.
    CKEDITOR.inline( el, {
        toolbarGroups: [
            { name: 'basicstyles' }
        ]
    } );
}

加载使用ajax加载的内容时，未创建CKeditor实例

2 个答案: