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 .


2 responses to “Adding Server Preview Plugin on CKEditor 3.x version”

  1. Al Spengler says:

    What a GREAT article… Thank You!
    I am having one problem however, when opening the Server Preview page, I receive the following error:
    Notice: Use of undefined constant ‘htmlData’ in serverpreview.php line 125
    The affected line in the file is:
    if (isset($_POST[‘htmlData’]) ) {
    The variable htmlData is empty (doesn’t appear to be passed).

    My entire code block is:

    I notice that the code in the plugin.js file expects the form id = “serverPreviewForm”
    … code: var theForm = document.getElementById(‘serverPreviewForm’) ;
    I am assuming that that is where my problem lies… but, creating a form id of “serverPreviewForm” doesn’t fix the problem. Also, looking at the source code for your “DEMO” screen (which works) I notice that there is no reference to: “serverPreviewForm”.

    Any help to get passed this hurdle would be appreciated.
    Thanks again for such a great article.

  2. lopau says:

    hi al, make sure that you have the name of the file and folder right, this is case sensitive in javascript that is my best guess. you dont need to create the id serverPreviewForm as this is automatically created.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.