Передача данных в и из CKEditor / jQuery-UI Модальный диалог

Question

Привет, Переливы!

Я пишу приложение на PHP, которое позволит редактировать различные блоки контента с помощью кнопки, которая загружает экземпляр CKEditor в модальное диалоговое окно jQuery-UI.

У меня есть кнопка для запуска диалога, как показано на следующих скриншотах:

В примере показано содержимое «Основное содержимое» внутри диалогового окна, готовое к редактированию. То, как я сейчас это делаю, - хак, просто для демонстрационных целей - у меня есть дублированный контент, жестко запрограммированный в скрытом #dialog div.

Я хотел бы иметь возможность сделать так, чтобы при нажатии кнопки «Изменить основное содержимое» все содержимое (HTML, Styling, Etc) передавалось jQuery в экземпляр CKEditor для редактирования, и когда внутри диалогового окна нажимается кнопка «Сохранить / отправить», изменения сохраняются с помощью Ajax и передаются обратно на редактируемую страницу.

В данный момент меня не слишком волнует бит Ajax, так как мне нужно будет использовать WordPress Ajax API, который выходит за рамки этого вопроса.

Главное, однако, это передать данные из div 'Main_Content' div -into- #dialog при нажатии кнопки «Изменить основное содержимое», а затем передать отредактированные данные из окна #dialog обратно в Div «Main_Content» после нажатия кнопки «Сохранить изменения».

Любая помощь будет принята с благодарностью! Я полностью застрял.

Спасибо!

~ PF

Answer 1

Звучит так, будто вы ищете функцию html.

Чтобы передать данные из div-файла Main_Content в #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');
        }
    }
});