ck編輯器 - 服務器預覽？

Question

如何獲取ckeditor的預覽按鈕將內容發送到服務器，以便在單擊預覽時在自定義頁面中顯示？

Answer 1

我們正在做這樣的事情，除了我們在頁面上有一個加載編輯器的預覽鏈接。 該方法可用於編輯器中的按鈕，但它需要額外的編碼（我將在底部概述該方法）。

預覽鏈接看起來像這樣：

<a href="#" onclick="return doPreview();">Preview the page</a>

我們有doPreview功能：

function doPreview() {
var hiddenForm = document.forms[ 'hidden_form' ];

// TextareaId is the id of the textarea being replaced with CKEditor (the instance name)
hiddenForm.elements[ 'preview_content' ].value = CKEDITOR.instances.TextareaId.getData();

// "myform" is the active form that contains the textarea replaced by CKEditor.
var liveForm = document.forms[ 'myform' ];
if ( ! liveForm ) {
  alert( 'Error finding "myform" form.' );
  return false;
}

hiddenForm.submit();

return true;

}

最后，有一個隱藏字段的表單（hiddenForm）：

<form name="hiddenForm" action="HTTP://www.yoursite.com/preview_template" method="POST" target="_blank">
  <input type="hidden" name="preview_content" value="" />
</form>

因此，單擊鏈接並調用doPreview函數。
該函數從CKEditor中獲取內容並將其分配給隱藏表單中的隱藏字段。
然后該函數提交隱藏的表單。
發布隱藏的表單，並在新窗口中加載預覽模板。
預覽模板的內容區域填充了$ _POST ['preview_content']（來自編輯器的內容數據）。

您可以修改以包含您需要發布的任何變量。

---

要通過單擊CKEditor中的按鈕來執行此操作：
您可以創建自定義插件。 這里有一個教程部分，其中包含有關創建插件的簡單說明：
http://docs.cksource.com/CKEditor_3.x/Tutorials

該插件可以再次使用主頁上的隱藏表單，您需要從插件函數調用父窗口。

或者，您可以在插件中使用JavaScript編寫表單並從那里提交。

注意：您可以使用此設置禁用默認預覽功能：

config.removePlugins = 'preview';

好吧，喬

Answer 2

您可以在此處獲得准備好的插件： http ： //alfonsoml.blogspot.com/2011/08/serverpreview-plugin-for-ckeditor.html

您只需配置要用於預覽的頁面，它將替換默認的“預覽”按鈕。 附帶的文檔中介紹了其他選項。