在之前的 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 调用。
但是如何重新启动或重置"保存"事件 - 如果这是导致问题的原因。我不再那么舒尔了....
通过在 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);
});
}
});
}
您将在编辑器实例"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){
// ...