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
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.
6. Create a preview.php file and save on the serverPreviewURL location. Below is the simple custom template in php.
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 .