Passing Data in and out of CKEditor / jQuery-UI Modal Dialog

Question

Greetings, Overflowers!

I am writing an application in PHP that will allow for editing various blocks of content via a button that loads a CKEditor Instance inside a jQuery-UI Modal Dialog box.

I've got the button working to launch the Dialog, as shown in these screenshots:

The example shows the 'Main Content' content inside the Dialog ready to edit. The way I'm doing this presently is a hack simply for demo purposes - I have duplicate content hard-coded into the hidden #dialog div.

What I'd like to be able to do is have it so that when the 'Edit Main Content' button is pushed, all content (HTML, Styling, Etc) gets passed by jQuery into the CKEditor instance for edit, and when a 'Save/Submit' button is pressed inside the dialog, the changes are saved via Ajax as well as passed back into the page being edited.

I'm not too concerned about the Ajax bit at this point, as I'll be needing to use the WordPress Ajax API, which is outside the scope of this question.

The main thing, though, is to pass data from the 'Main_Content' div -into- the #dialog when the 'Edit Main Content' button is clicked, and then pass the edited data from the #dialog window back into the 'Main_Content' div after a 'Save Changes' button is pressed.

Any help will be greatly appreciated! I'm totally stuck.

Thanks!

~PF

Answer 1

Sounds like you're looking for the html function.

To pass the data from the 'Main_Content' div -into- the #dialog when the 'Edit Main Content' button is clicked:

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

To pass the edited data from the #dialog window back into the 'Main_Content' div after a 'Save Changes' button is pressed would look like:

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