javascript CKEditor 和 jQuery serialize() 问题

CKEditor and jQuery serialize() issue

提问by Alex

I'm having trouble with the jQuery serialize() function.

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

In context, I'm opening a form and checking for changes made to it, so when the form loads, I serialze the data and assign it to a global variable:

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

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

That works fine.

这很好用。

Then when I come to click a button to leave the form, it performs this check:

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

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

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

ANYWAY. Both serialize() functions work, but the second one has converted apostrophes etc into a series of numbers and percentage symbols (Which i can safely assume is some code for apostrophe).

反正。两个 serialize() 函数都可以工作，但第二个函数已将撇号等转换为一系列数字和百分比符号（我可以安全地假设是撇号的一些代码）。

Any ideas why? It means even when no changes are made, the dialogue opens and moans that the form's been changed without saving.

任何想法为什么？这意味着即使没有进行任何更改，对话框也会打开并抱怨表单已更改而未保存。

Help!

帮助！

Here's some sample data.

这是一些示例数据。

I am using a CKEditor instance.

我正在使用 CKEditor 实例。

Part of the first result:

第一个结果的一部分：

&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` 

and the second:

第二个：

&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

回答by DarthJDG

As mentioned in the comments on your original post, I'm assuming you're using CKEditor and in your jQuery ready function (or somewhere after your document loaded) you replace a textarea with an editor instance. CKEditor, like most WYSIWYG editors likes to reformat the text that you pass to it, making it valid markup, replacing special characters with HTML entities, wrapping your content in a paragraph, etc. This means although you haven't changed anything, the original and the reformatted content can be different.

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

The initialisation of the editor instance is delayed and probably occurs after you've serialised your form. Even so, CKEditor is not strongly linked with the (now hidden) textarea that it's been created from, you need to call the editor's updateElement function to flush all changes. It usually does it automatically on form submit, that's why you're getting the reformatted content in your submit handler.

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

So you just need to make sure you call the updateElement function before you're serialising the first time, for which the best place is after the editor has loaded. Luckily there is an event for that, assuming the following HTML markup:

所以你只需要确保在第一次序列化之前调用 updateElement 函数，最好的地方是在编辑器加载之后。幸运的是有一个事件，假设以下 HTML 标记：

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

jQuery ready function:

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);
});

回答by Miika Kontio

Thanks! I've had problems long time now with CKEditor textarea. I couldn't get changed value without a submit in cakephp.

谢谢！我在 CKEditor textarea 上遇到了很长时间的问题。如果没有在 cakephp 中提交，我就无法获得更改的值。

But now all works. I had to call updateElementbefore serializelike this:

但现在一切正常。我只好打电话updateElement之前serialize是这样的：

CKEDITOR.instances.SurveyBody.updateElement();
var formData = $("#surveyForm").serialize();

回答by Pointy

The values are URI-encoded because ".serialize()" is intended to be used when preparing HTTP parameters for transmission.

这些值是 URI 编码的，因为“.serialize()”旨在为传输准备 HTTP 参数时使用。

You can gather the values of all the form elements into a big string by just iterating over all the <input>elements (and <select>and <textarea>too, if applicable). Radio buttons get a little tricky but it's still a pretty minor effort.

你可以只遍历所有收集所有表单元素的值转换成一个大的字符串<input>元素（和<select>和<textarea>也一样，如果适用）。单选按钮有点棘手，但这仍然是一个很小的努力。

回答by kapa

From the jQuery Docs:

来自jQuery 文档：

The .serialize() method creates a text string in standard URL-encoded notation.

.serialize() 方法以标准 URL 编码表示法创建文本字符串。

That is why you have those percentages and numbers. Though it should return the same value no matter how many times you call it, so I'm sure you're doing something to your form between the two calls.

这就是为什么你有这些百分比和数字。尽管无论您调用多少次它都应该返回相同的值，因此我确定您在两次调用之间对表单进行了某些操作。

You could use a different approach like

您可以使用不同的方法，例如

var form_changed=false;

$('#edit-job-form :input').change(function () {
    form_changed=true;
});

jQuery :input selector

jQuery：输入选择器

回答by Roubi

If you're using several instances of CK Editor at a time, you can use a more generic method before serializing your form:

如果您一次使用多个 CK Editor 实例，则可以在序列化表单之前使用更通用的方法：

    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();
    };
    var data = $('#my-form').serialize();