/**
* 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
});
}
});
})();
Great stuff. You should open it as a new ticket and try to get it added to the core code. I think that having an optionally configurable preview page would be incredibly helpful for some people!
Re: CKEditor and serverpreview?
Re: CKEditor and serverpreview?
/** * 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 }); } }); })();Re: CKEditor and serverpreview?