Tutorial: Using FCKEditor FileManager in the new CKEditor

Recently I decided to upgrade a clients administration panel from the old FCKEditor to the new CKEditor – however after installation I realised the FileManager was missing… So I started trawling the internet looking for an alternative.

I came across this very useful guide which I followed step-by-step and it was so easy!! I successfully got the old FileManager from FCKEditor to CKEditor!

There was 2 problems with the guide though… Firstly instead of this code:

CKEDITOR.replace( 'editor1',
  {
   filebrowserBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Connector=http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php',
   filebrowserImageBrowseUrl : 'js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php',
   filebrowserFlashBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php'}
  );

I had to use the following, note that instead of relative paths I used full paths and all & had to be changed to just & else it breaks the scripts:

filebrowserBrowseUrl :'<?=CMS_SITE_URL?>assets/ckeditor/filemanager/browser/default/browser.html?Connector=<?=CMS_SITE_URL?>assets/ckeditor/filemanager/connectors/php/connector.php',
filebrowserImageBrowseUrl : '<?=CMS_SITE_URL?>assets/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=<?=CMS_SITE_URL?>assets/ckeditor/filemanager/connectors/php/connector.php',
filebrowserFlashBrowseUrl :'<?=CMS_SITE_URL?>assets/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=<?=CMS_SITE_URL?>assets/ckeditor/filemanager/connectors/php/connector.php'
 

The second problem stumped me for 20 minutes until I spotted it, the following code is incorrect:

function GetUrlParam( paramName )
{
 var oRegex = new RegExp( '[\?&]' + paramName + '=([^&]+)', 'i' ) ;
 var oMatch = oRegex.exec( window.top.location.search ) ;
 
 if ( oMatch && oMatch.length > 1 )
 return decodeURIComponent( oMatch[1] ) ;
 else
 return '' ;
}

Notice the > in the if statement? Well the correct code should be:

function GetUrlParam( paramName )
{
 var oRegex = new RegExp( '[\?&]' + paramName + '=([^&]+)', 'i' ) ;
 var oMatch = oRegex.exec( window.top.location.search ) ;
 
 if ( oMatch && oMatch.length > 1 )
 return decodeURIComponent( oMatch[1] ) ;
 else
 return '' ;
}

Other than that the guide is brilliant! So good I had to share it with my blog

http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/

Author: Dean WilliamsI'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips

Twitter Facebook Linkedin