ck编辑器 - 服务器预览？

Question

如何获取ckeditor的预览按钮将内容发送到服务器，以便在单击预览时在自定义页面中显示？

Answer 1

We're doing something like this except that we have a preview link on the page that loads the editor. The approach could be used for a button within the editor, but it requires additional coding (I'll outline that approach at the bottom).

The preview link looks something like this:

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

We have the doPreview function:

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;

}

Finally, there's a form with hidden fields (hiddenForm):

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

So, the link is clicked and the doPreview function is called.
The function grabs the content from CKEditor and assigns it to a hidden field in the hidden form.
Then the function submits the hidden form.
The hidden form is posted and the preview template is loaded in a new window.
The content area of the preview template is populated with $_POST['preview_content'] (the content data from the editor).

You can modify to contain any variables you need to post.

---

To do this by clicking a button within CKEditor:
You could create a custom plugin. There's a tutorial section with easy instructions for creating a plugin here:
http://docs.cksource.com/CKEditor_3.x/Tutorials

The plugin could work with a hidden form on the main page again, you'll need to call the parent window from your plugin function.

Or, you could compose the form with JavaScript within your plugin and submit it from there.

Note: You can disable the default preview functionality using this setting:

config.removePlugins = 'preview';

Be Well, Joe

Answer 2

You can get a plugin ready to work here: http://alfonsoml.blogspot.com/2011/08/serverpreview-plugin-for-ckeditor.html

You just have to configure the page that you want to use for the preview and it will replace the default Preview button. Additional options are explained in the included documentation.