Question

在之前的ajax调用中，我获得了所选页面的所有文章。然后我显示它们并将此功能 - 点击 - 绑定到它们中的每一个。这只工作一次当我想要更改第二篇或第三篇文章时，ajax调用中的文章id保持其第一个值。

CKEDITOR.replace( 'editor1' );

function editArticle(article){
   // id changes for each article as it is supposed to
   var id = article.attr('data-id');
   var text = article.html();
   $('#ckModal').modal();
   $('.modal-title').text('Editing Article: '+id+' on Page: '+pageTitle);
   CKEDITOR.instances.editor1.setData(text);
   CKEDITOR.instances.editor1.resize('100%', '350', true);
   CKEDITOR.instances.editor1.on('save', function(e){
      e.cancel();
    var html = CKEDITOR.instances.editor1.getData();
    if(html){
        $.ajax({
            type: 'POST',
            url: '/admin/nodes/edit',
            cache: false,
            data: {'html' : html,
                    'articleId' : id }
        }).done(function(msg){
            // next two lines did not work
            //CKEDITOR.instances.editor1.fire('save');
            //CKEDITOR.instances.editor1.stop('save');

            // id stays the same
            console.log(id);

            // I echo an 'ok' string when update worked from php
            if(msg === 'ok'){
                article.html(html);
                $('#ckModal').modal('hide');

            }else{
                //alert(msg);
            }

        }).fail(function(xhr, status, error){
            console.log(JSON.stringify(xhr));
            console.log("AJAX error: " + status + ' : ' + error);
        });
      }
  });
}

我不得不取消保存事件以获取和设置数据并执行ajax调用。

但是如何重新启动或重置'save'事件 - 如果这是导致问题的原因。我不再那么害羞了......

Answer 1

通过在ajax done函数中销毁编辑器实例并在其后创建一个新实例来实现它。

function editArticle(article){
var id = article.attr('data-id');
var text = article.html();
//CKEDITOR.replace( 'editor1' );
$('#ckModal').modal();
$('.modal-title').text('Editing Article: '+id+' on Page: '+pageTitle);
CKEDITOR.instances.editor1.setData(text);
CKEDITOR.instances.editor1.resize('100%', '350', true);
CKEDITOR.instances.editor1.on('save', function(e){
    e.cancel();
    var html = CKEDITOR.instances.editor1.getData();
    if(html){
        var title = $('.modal-title').html()
        $('.modal-title').prepend(spinner);
        $.ajax({
            type: 'POST',
            url: '/admin/nodes/edit',
            cache: false,
            data: {'html' : html,
                    'articleId' : id }
        }).done(function(msg){
            //console.log(id);
            $('.modal-title').html(title);
            if(msg === 'ok'){
                article.html(html);
                $('#ckModal').modal('hide');
                CKEDITOR.instances.editor1.destroy();
                CKEDITOR.replace( 'editor1' );
            }else{
                //alert(msg);
            }

        }).fail(function(xhr, status, error){
            console.log(JSON.stringify(xhr));
            console.log("AJAX error: " + status + ' : ' + error);
        });
    }
});

}

Answer 2

您正在编辑器实例'editor1'上分配多个事件侦听器，每篇文章一个。当您单击“保存”时，所调用的第一个侦听器（指定的第一篇文章）将使用e.cancel（）取消所有其他侦听器。

我看到你通过摧毁你的编辑器实现了你想要的东西。这样做会删除事件侦听器，并解决您的问题。您可以通过在处理程序中调用e.removeListener（）来实现相同的功能，这样在第一次运行后删除自身并避免重新创建编辑器。另请注意，销毁编辑器并重新创建它们会泄漏内存（某些版本比其他版本#13123，#12307更差），因此如果可能，应该避免这样做。

两种解决方案都会使保存按钮在保存后无法使用;当然，在选择另一篇文章进行编辑之后它会起作用。所以我的建议是在分配一个新的命令之前从你的保存命令中删除所有以前的监听器，如下所示：

// ... in function editArticle ...
CKEDITOR.instances.editor1.resize('100%', '350', true);
CKEDITOR.instances.editor1.getCommand('save').removeAllListeners();
CKEDITOR.instances.editor1.on('save', function(e){
// ...

如何重置ckeditor保存事件

2 个答案: