If you were using the older FCKEditor online editor and got the Server Preview plugin working, you should know that the same plugin is not compatible with CKEditor. What Server Preview does is it allows you to preview content on a custom designed page you have be it an HTML, PHP or ASP page, giving you an idea how the page would look like with the content you are entering.

After scorching the net for on how to have Server Preview plugin work on CKEDitor some were a bit confusing, luckily somebody(vladfr) ported the script to work with CKEditor but he has no blog or site to document how it works I decided to create a straightforward tutorial on how to get Server Preview enabled on CKEditor.

1. First ofcourse you should get the latest version of CKEditor.

2. Copy and paste this code and save as plugin.js

[code lang=”php”]
/**
* File Name: serverpreview\plugin.js
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* Plugin for CKeditor 3 to send the current data to the server so it can be previewed in a custom way
* Extended from the FCK plugin with the same name, by Alfonso Martínez de Lizarrondo
*
* version
* 0.1 15/02/2006
* 0.2 02/09/2007 Replace the ‘Preview’ command instead of creating a custom one.
* 0.3 14/07/2010 No longer replaces the Preview button, adds another one instead.
*
* File Author:
* Vlad Fratila
* vlad.fratila@gmail.com
*
* == How to Use: ==
*
* Add the plugin in your config.js like other plugins:
* config.extraPlugins = ‘serverpreview’;
*
* You will also need to specify the full URL of your server-side script like this:
* config.serverPreviewURL = ‘http://www.mydomain.com/myfile.php’;
* In this file, you need to stripslashes and display the post variable “htmlData”
*
* To get an icon for the button, you will need to change your skin’s CSS file
* (e.g. if you’re using the default: change /ckeditor/skins/kama/editor.css)
* I just disabled the Preview plugin and did a Search/Replace to replace ‘preview’ with ‘serverpreview’.
*
* Lastly, don’t forget to add the button ‘ServerPreview’ to your toolbars!
*
*/

(function(){

var pluginName = ‘serverpreview’;

var serverpreviewCmd =
{
modes : { wysiwyg:1, source:1 },
canUndo : false,
exec : function( editor )
{
var theForm = document.getElementById(‘serverPreviewForm’) ;
if (!theForm) {
//it doesn’t exist still, we create it here
theForm = document.createElement(‘FORM’) ;
theForm.method = ‘POST’ ;
theForm.name = ‘serverPreviewForm’ ;
theForm.id=theForm.name ;
theForm.style.display = ‘none’ ;

theForm.action = editor.config.serverPreviewURL;

//new window please
theForm.target=’_blank’;
document.body.appendChild( theForm );
}

//clear previous data
theForm.innerHTML = ” ;
//set the new content
var input = document.createElement(‘INPUT’) ;
input.type = ‘hidden’;
//change the name as needed –>
input.name = ‘htmlData’ ;
//set the data
input.value = editor.getData();
//append the new input to the form
theForm.appendChild( input );

//that’s all, append additional fields as needed, or set the variables in the previewPath

//send the data to the server
theForm.submit();
}
}

CKEDITOR.plugins.add( pluginName,
{
init : function( editor )
{
editor.addCommand( pluginName, serverpreviewCmd );
editor.ui.addButton( ‘ServerPreview’,
{
label : ‘Server Preview’,
command : pluginName
});
}
});

})();

[/code]

3. Create a serverpreview folder in your CKEditor plugins folder

4. Move the saved plugin.js to this folder

5. Open the ckeditor/config.js file and add the following, briefly explaining the serverPreviewURL is the path to the custom template page. Toolbar with ServerPreview overrides the old Preview button.

[code lang=”php”]
config.extraPlugins = ‘serverpreview’;
config.serverPreviewURL = ‘http://localhost/ckeditor/preview.php’;
config.toolbar = [
[‘Source’],
[‘ServerPreview’],
[ ‘Styles’,’Format’,’TextColor’,’BGColor’, ‘Link’,’Unlink’,’Anchor’ ],
[‘Cut’,’Copy’,’Paste’,’Undo’,’Redo’ ],
[‘Bold’, ‘Italic’],
[ ‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’
]

];
[/code]

6. Create a preview.php file and save on the serverPreviewURL location. Below is the simple custom template in php.

[code lang=”php”]
< !doctype html>

< ?php $data = $_POST[‘htmlData’]; if ( get_magic_quotes_gpc() ) $data = stripslashes( $data ) ; echo $data ; ?>

[/code]

7. Next open ckeditor/skins/kama/editor.css search for .cke_button_preview and change to .cke_button_serverpreview then save.

8. And here is a page I put for a working DEMO .

Enjoy