Question

How would I go about getting ckeditor’s preview button to send the content to the server so I can show it in a custom page when preview is clicked?

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