Tutorial: Using FCKEditor FileManager in the new CKEditor

There is a Mobile Optimized version of this page (AMP). Open Mobile Version.

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 &gt; 1 )
		return decodeURIComponent( oMatch[1] ) ;
	else
		return '' ;
}

Notice the &gt; 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 Smile

 

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

Facebooktwitterredditpinterestlinkedinmail

Author: Dean Williams

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

0 0 vote
Article Rating
Subscribe
Notify of
2 Comments
Inline Feedbacks
View all comments

Hi, thank you very much for this article. After couple of hours fighting with filemanager in CK Editor I was getting hopeless. I followed the tutorial and it still did not work. Finally I implemented your tweaks and it all started to work!