[ACCEPTED]-CKEditor and jQuery serialize() issue-ckeditor

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

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

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

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

jQuery 1 ready function:

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

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

But now 1 all works. I had to call updateElement before serialize like this:

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

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

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

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

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

From the jQuery Docs:

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

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

You could use a different 1 approach like

var form_changed=false;

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

jQuery :input selector