Just Another Dang Blog » Javascript

Adding Server Preview Plugin on CKEditor 3.x version

lopau — Wed, 29 Jun 2011 16:52:56 +0000

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

/**

* 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

            });

      }

   });

})();

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.

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’

                                    ]

                                ];

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

< !doctype html>

                FCKeditor – Server preview

        $data = $_POST[‘htmlData’];
        if ( get_magic_quotes_gpc() )

                $data = stripslashes( $data ) ;
        echo $data ;

?>

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

Ajax caching issue with IE workaround

lopau — Sun, 25 Oct 2009 04:15:10 +0000

If you’ve been developing websites I’m sure you pretty feel a little nausea from browser refreshing after an operation and prefer to work with AJAX for updating, deleting or loading some data from your DB with out the page reloading.

Most commonly used is http request is GET, your script runs flawlessly with Firefox, Chrome and Safari however on IE7 & and IE8 you don’t see the updates. This is because IE 7 and IE 8 treat GET request differently than POST, if there is no change from the last call it will always load up from it’s cache.

The workaround to the issue is pass an ever changing variable to the GET request like the current timestamp or date.

1. You can pass it on the ajax function call by adding an extra parameter time on the ajax call on the page.

ajaxify(x,); // ajaxify(keywords, rand_time)

Then on your ajax function xmlHttp request call the rand_time parameter

xmlHttp.open(“GET”,”includes/ajax_page.php?dontcacheme=” + rand_time +”&keywords=”+keywords,true);

2. Or just create the random string using a Javascript Date class.

xmlHttp.open(“GET”,”includes/ajax_page.php?dontcacheme=” + new Date().getTime() +”&keywords=”+keywords,true);

This workaround worked well with my ajax scripts. Hope it helps.

3D CSS Effects – Javascript and CSS on Steriods

lopau — Tue, 21 Jul 2009 03:34:53 +0000

Wish I have a new Mac already to try this on Safari with Webkit. This is an example of Javascript and CSS taking it heads on with Flash, like Javascript and CSS on steriods. On Windows with Safari 4.1 with latest Webkit build you won’t see the 3D effect but you would see the nice stacking of the images, controlling the scroll with your arrow keys. For Mac users on Snow Leopard you got to try this out. Go to Snowstack to experience it on your Safari browser. Watch the video.

Submit a Form using Enter Key

lopau — Mon, 23 Feb 2009 11:54:37 +0000

Here is a little Javascript I picked up. I run into a problem in IE wherein a form won’t submit when you hit the Enter key it just reloads itself but clicking the Submit button would processes your form. The form works with the Enter key fine in FF but not in IE.

Chances are that you maybe calling a function on your Submit button that will load the requested page? Something like this?

input type=”submit” name=”search” value=”Search” onClick=”myfunction();” >

Where in the myfunction() function can be anything like validating a page before it submits your data, or trigger another event or load an ajax request.

To fix this and allow using the Enter key to submit your form in IE. Create a new function in your Javascript like below which checks for the Enter key being pressed, keyCode == 13 then call your original event myfunction.

function checkEnter(e){
var characterCode
if(e && e.which){
e = e
characterCode = e.which
}
else {
e = event
characterCode = e.keyCode
}

if(characterCode == 13){
myfunction(); // onClick function you were loading on the submit button
return false
}
else{
return true
}
} // checkEnter

Then on one of the input fields call the onKeyPress event and call your new function.

input type=”text” name=”keywords” onKeyPress=”return checkEnter(event)” >