將數據傳入和傳出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'); 
     } 
    } 
});