javascript - CKEditor 和 jQuery serialize() 问题

Question

我在使用 jQuery serialize() 函数时遇到问题。

在上下文中，我正在打开一个表单并检查对其所做的更改，因此当表单加载时，我序列化数据并将其分配给一个全局变量:

form_data.edit_initial = $('#edit-job-form').serialize();

这很好。

然后当我点击一个按钮离开表单时，它会执行此检查:

var start = form_data.edit_initial;
var end = $('#edit-job-form').serialize();

if (start == end) 
{ 
    // Do button action 
}
else
{ 
    // Open confirm dialogue 
}

无论如何。两个 serialize() 函数都有效，但第二个函数将撇号等转换为一系列数字和百分比符号(我可以放心地假设是撇号的一些代码)。

有什么想法吗？这意味着即使没有进行任何更改，对话框也会打开并提示表单已在未保存的情况下更改。

求助!

这是一些示例数据。

我正在使用 CKEditor 实例。

第一个结果的一部分:

&edit_time_digital=60&edit_desc=%3Cp%3E%0D%0A%09They'd+like+the+share+their+site+incase+people+want+to+see+their+entire+collection+of+furnature.%3C%2Fp%3E%0D%0A%3Cp%3E%0D%0A%09The+site+needs+the+following%3A%3C%2Fp%3E%0D%0A%3Cul%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Home+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Standard+pages%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Galleries+(By+category)%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Contact+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09News+listings%3C%2Fli%3E%0D%0A%3C%2Ful%3E%0D%0A%3Cp%3E%0D%0A%09It+should+be+a+very+simple+generator+build.%3C%2Fp%3E%0D%0A&edit_status=active` 

第二个:

&edit_time_digital=60&edit_desc=%3Cp%3E%0D%0A%09They%26%2339%3Bd+like+the+share+their+site+incase+people+want+to+see+their+entire+collection+of+furnature.%3C%2Fp%3E%0D%0A%3Cp%3E%0D%0A%09The+site+needs+the+following%3A%3C%2Fp%3E%0D%0A%3Cul%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Home+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Standard+pages%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Galleries+(By+category)%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Contact+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09News+listings%3C%2Fli%3E%0D%0A%3C%2Ful%3E%0D%0A%3Cp%3E%0D%0A%09It+should+be+a+very+simple+generator+build.%3C%2Fp%3E%0D%0A&edit_status=active

Answer 1

正如您在原始帖子的评论中提到的，我假设您使用的是 CKEditor 并且在您的 jQuery 就绪函数中(或在您的文档加载后的某个地方)您将文本区域替换为编辑器实例。 CKEditor，像大多数 WYSIWYG 编辑器一样，喜欢重新格式化您传递给它的文本，使其成为有效标记，用 HTML 实体替换特殊字符，将您的内容包装在一个段落中，等等。这意味着虽然您没有更改任何内容，但原始并且重新格式化的内容可以不同。

编辑器实例的初始化被延迟，并且可能发生在您序列化表单之后。即便如此，CKEditor 与创建它的(现在隐藏的)textarea 没有强链接，您需要调用编辑器的 updateElement 函数来刷新所有更改。它通常在表单提交时自动执行，这就是您在提交处理程序中获取重新格式化内容的原因。

因此，您只需确保在第一次序列化之前调用 updateElement 函数，最好的位置是在编辑器加载之后。幸运的是有一个事件，假设有以下 HTML 标记:

<form id="myForm">
   <textarea name="test" id="myEditor">My random text</textarea>
</form>

jQuery 就绪函数:

$(function(){
   function SerializeForm(){
      // Make sure we have the reformatted version of the initial content in the textarea
      CKEDITOR.instances.myEditor.updateElement();

      // Save the initial serialization
      form_data.edit_initial = $('#myForm').serialize();
   }

   // You might as well leave it here in case CKEditor fails to load
   form_data.edit_initial = $('#myForm').serialize();

   // Create editor instance    
   CKEDITOR.replace('myEditor');

   // Tap into CKEditor's ready event to serialize the initial form state
   CKEDITOR.instances.myEditor.on("instanceReady", SerializeForm);
});