php - 将数据传入和传出 CKEditor/jQuery-UI 模式对话框

Question

您好，Overflowers!

我正在用 PHP 编写一个应用程序，它允许通过一个在 jQuery-UI 模态对话框中加载 CKEditor 实例的按钮来编辑各种内容 block 。

我有启动对话框的按钮，如这些屏幕截图所示:

该示例显示了对话框中准备编辑的“主要内容”内容。我目前这样做的方式只是为了演示目的而进行的黑客攻击——我将重复的内容硬编码到隐藏的#dialog div 中。

我想要做的是拥有它，以便在按下“编辑主要内容”按钮时，所有内容(HTML、样式等)都由 jQuery 传递到 CKEditor 实例中进行编辑，并且当在对话框中按下“保存/提交”按钮时，更改将通过 Ajax 保存并传回正在编辑的页面。

此时我不太关心 Ajax 位，因为我需要使用 WordPress Ajax API，这超出了这个问题的范围。

不过，最主要的是在单击“编辑主要内容”按钮时将数据从“Main_Content”div 传递到#dialog，然后将编辑后的数据从#dialog 窗口传递回按下“保存更改”按钮后的“Main_Content”div。

任何帮助将不胜感激!我完全卡住了。

谢谢!

~PF

Answer 1

听起来您正在寻找 html功能。

单击“编辑主要内容”按钮时，将数据从“Main_Content”div 传递到#dialog:

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

要在按下“保存更改”按钮后将编辑后的数据从#dialog 窗口传回“Main_Content”div，如下所示:

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