Using jQuery to grab the content from CKEditor's iframe

Question

I have a custom-written CMS that uses CKEditor *(FCKEditor v3) for editing content. I\'m also using the jQuery Validation plugin to check a

Answer 1

I think the user was asking about serializing, I was struggling serializing a form to submit and it was giving me a lot of issues.

This is what worked for me:

$(document).ready(function() {
$('#form').submit(function(){
if ( CKEDITOR.instances.editor1.getData() == '' ){
    alert( 'There is no data available' );//an alert just to check if its working
}else{
    var editor_data = CKEDITOR.instances.editor1.getData();
    $("#editor1").val(editor_data); //at this point i give the value to the textarea
    $.ajax({ 
                    //do your ajax here  

                     });

        }
return false;
    });
 });

Answer 2

I have also been trying to fix this problem today. I realised that the reason the above code isnt working for me is because the CKEditor instance isnt ready yet when the document property is referenced. So you have to call the "instanceReady" event and within that the document's events can be used, because prior to that it just doesnt exist.

This example might work for you:

CKEDITOR.instances["editor1"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

 //and paste event
this.document.on("paste", CK_jQ);
});

function CK_jQ()
{

    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
}

Answer 3

CKEDITOR.instances.wc_content1.getData() will return the ckeditor data
CKEDITOR.instances.wc_content1.setData() will set the ckeditor data

Answer 4

I've just released a CKEditor plugin for jQuery which will take care of all this in the background without any extra code: http://www.fyneworks.com/jquery/CKEditor/

Answer 5

This should do it...

CKEDITOR.instances["editor1"].document.on('keydown', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

CKEDITOR.instances["editor1"].document.on('paste', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

edit: added section to update textbox after pastes, too...