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

Question

问候，溢出！

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

我有按钮着手推出的对话框中，在这些截图所示：

的例子显示对话框内的“主要内容”的内容准备编辑。我现在这样做的方式仅仅是为了演示的目的而进行破解 - 我将重复的内容硬编码到隐藏的#dialog div中。

我希望能够做到的是，当按下'编辑主内容'按钮时，所有内容（HTML，样式等）都会被jQuery传递到CKEditor实例中进行编辑，当在对话框中按下“保存/提交”按钮时，更改将通过Ajax保存并返回到正在编辑的页面。

在这一点上，我并不太在意Ajax位，因为我需要使用WordPress Ajax API，这不在此问题的范围之内。

主要的东西，虽然是在点击“编辑主要内容”按钮时，从“Main_Content” DIV -into-的#dialog传递数据，然后从#dialog窗口通过编辑的数据回按下'Save Changes'按钮后的'Main_Content'div。

任何帮助将不胜感激！我完全陷入困境。

谢谢！

〜PF

Answer 1

听起来你正在寻找的html功能。

要从“Main_Content” DIV -into-的#dialog传递数据被点击“修改主要内容”按钮时：

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

要从#dialog窗口传递编辑的数据返回到按下“Save Changes”按钮后的'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'); 
     } 
    } 
});