Transferring data to and from the CKEditor / jQuery-UI modal dialog

Question

Cheers, Overflows!

I am writing a PHP application that will allow editing various blocks of content using a button that loads a CKEditor instance inside the jQuery-UI Modal Dialog dialog box.

I have a button to launch a dialog, as shown in these screenshots:

This example shows the contents of the main content inside a dialog box ready for editing. The way I'm doing it now is to hack just for demo purposes - I have duplicate content encoded in a hidden div #dialog.

What I would like to do is make sure that when you click the "Edit main content" button, all the content (HTML, Styling, Etc) is passed jQuery to the CKEditor instance for editing, and when the "Save / Send" button is clicked in the dialog box, changes are saved through Ajax, and also transferred back to the edited page.

I'm not too worried about the Ajax bit at this point, as I will need to use the WordPress Ajax API, which is beyond the scope of this question.

The main thing, however, is to transfer the data from the 'Main_Content' section div -int- #dialog when you click the "Edit main content" button, and then transfer the edited data from the #dialog window back to "Main_Content" after clicking the "Save Changes" button.

! .

!

~ PF

Answer 1

, html.

'Main_Content' div -into- #dialog " ":

$('#edit-main-content-button').click(function() {
    var content = $('#Main_Content').html();
    $('#dialog').html(content);
});

#dialog div "Main_Content" " ", :

$('#dialog').dialog({
    /*
    your other settings/buttons
    */
    buttons: {
        'Save Changes': function() {
            // TODO: submit changes to server via ajax once its completed:
            var content = $(this).html();
            $('#Main_Content').html(content);
            $(this).dialog('close');
        }
    }
});