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';

Be Well，
乔

Answer 2

您可以在这里准备一个插件： http://alfonsoml .blogspot.com/2011/08/serverpreview-plugin-for-ckeditor.html

您只需配置要用于预览的页面，它将替换默认的预览按钮。其他选项在随附的文档中进行了解释。