Integrating FCKEditor FileManager in CKEditor

Posted on February 25, 2010 by Penuel

A Small History

CKEditor has been one of the most popular and used WYSIWYG editor for web, which has been used by many popular open source projects, websites and companies. According to its official website, FCKeditor has been around for more than six years. Since 2003 it has built a strong user community becoming the most used editor in the market, accumulating more than 3,5 million downloads. On 2009, the company decided renaming the editor, bringing to the light their next generation solution: CKEditor 3.0.

CKEditor inherits the quality and strong features people were used to find in FCKeditor, in a much more modern product, added by dozens of new benefits, like accessibility and ultimate performance.CKEditor has made many features pluggable so that it can be extended by developers according to their needs.

Why this tutorial?

However, the new CKEditor does not provide the File Manager/File Browser that it used to provide by default in FCKEditor. This functionality is now provided by CKFinder. CKFinder provides many cool functions and is definitely a better product than traditional FCKEditor’s FIle Browser, but its not a free product and users have to purchase the license in order to use the product.

If you are not willing to purchase CKFinder you can make your own external file manager and plugin to CKEditor through its APIs, alternatively you can directly integrate the FCKEditor’s File Manager (File Browser) feature with CKEditor. This is what i am going to describe in this short tutorial.

Before starting the tutorial you may also like to view the fully functional demo, or you may download the example and start working on it. Please note that this tutorial is for the PHP language and connectors, but same steps can also be applied for other supported languages and connectors.

Also I assume that you have sufficient knowledge about integrating CKEditor on your page.

Starting with the tutorial

Download the CKEditor and copy it to your desired folder. In this example I have copied it to

siteroot/filemanager_in_ckeditor/js/ckeditor

demo.html is the page where I would like to add the WYSIWYG editor, and I have placed my page over here:

siteroot/filemanager_in_ckeditor/demo.html

Since we are going to integrate the inbuilt File Manager available in FCKEditor we will copy the ‘filemanager’ folder from the FCKEditor source files which is genereally located in

fckeditor/editor/

In this example I have copied the ‘filemanager’ folder to

siteroot/filemanager_in_ckeditor/js/ckeditor/

At this stage you may delete the connectors from the filemanager folder which you are not using. I have deleted all the connector folders except the ‘php’ connector which I am using in this example.

Once the required files are copied you need to tie up the filemanager with CKEditor and make it active in the code. To do this you need to modify the CKEditor intialization code like below. (Obviously this goes in demo.html page in my case)

  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&amp;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&amp;Connector=http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php'}
             );

The above options, enables the “Browse Server” buttons on the “Link”, “Image”, “Flash” dialogs. You will have to adjust the above paths according to your directory structure. Also please note that for the sake of simplicity I have hard coded my website domain (www.mixedwaves.com) in the above paths, this should be changed to whatever is applicable in your case and can be added dynamically instead of hard coding it.

One important thing to remember at this stage is that while integrating the File Browser in CKEditor we still have to make configuration changes that we used to do for enabling the Browse and Upload functions in FCKEditor. Like enabling the php connector and specifying the UserFilesPath to correct location in:

filemanager/connectors/php/config.php

Up to now if everything has gone correct, you should be able to see the “Browse Server” buttons in the “Link”, “Image” and “Flash” dialogs. Clicking on the “Browse Server” button would open the “File Manager” window.

As a last step to making everything work you need to modify the following file:

filemanager/browser/default/frmresourcelist.html

You need to add the following JavaScript function, where all the other Javascript functions have been defined. Copy and paste the below code:

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 '' ;
}

In the same file you need to modify the function called “OpenFile”. Search the function “OpenFile” and replace it with the following function:

Update: 25 June 2011

File names with spaces are now visible in preview window. Earlier filenames with spaces were not encoded correctly hence were not visible in preview window. Thanks to Angela Yamat and Len

function OpenFile( fileUrl )
{
 
	//PATCH: Using CKEditors API we set the file in preview window.	
 
	funcNum = GetUrlParam('CKEditorFuncNum') ;
	//fixed the issue: images are not displayed in preview window when filename contain spaces due encodeURI encoding already encoded fileUrl
	window.top.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl);
 
	///////////////////////////////////
	window.top.close() ;
	window.top.opener.focus() ;
}

The above code essentially sets the file URL to the preview window in the dialog box, when user selects a file in the File Manager.

With this you are done integrating the File Manager in CKEditor.

If everything has been configured and patched correctly, you should now be able to use a fully functional File Browser window just like you used to do in old FCKEditor.

Update: 3rd April 2010

With the generous effort of Brombomb, you can now also enable the ‘Upload’ tab for quick upload of files in your File Browser. You can find the hack on this link: http://stackoverflow.com/questions/1903510/ckeditor-integration-with-fckeditor-filebrowser/2564039

I have also implemented the above solution but with few modifications and in more systematic way so that the functionality is as close as possible with the old FCKEditor file browser. Thanks again to Brombomb.

Continuing with the tutorial, Enabling Quick Upload

Once you are done with the above steps you will have fairly working File Browser Window. However the old FCKEditor also supported a feature called Quick Upload and had separate upload tab. The upload tab can be enabled and made functional by following the below four steps.

In your CKEditor initialization code you need to add few more config variables as shown below that enables the Quick Upload tab. (Again this goes in demo.html page)

  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&amp;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&amp;Connector=http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php',
		    filebrowserUploadUrl  :'http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/upload.php?Type=File',
		    filebrowserImageUploadUrl : 'http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/upload.php?Type=Image',
		    filebrowserFlashUploadUrl : 'http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/upload.php?Type=Flash'
 
});

Again need not mention, that the domain needs to be replaced by your own domain. The last three config variables in the above code enables the “Upload” tab in your “Flash”, “Image”, “File” dialogs. Same can be done for “Media” type which I haven’t done in this tutorial.

Now in next few steps we are going to modify/hack few files, this needs little care and attention.

Open the the file

filemanager/connectors/php/upload.php

And search and replace the PHP function call “FileUpload” with the following code snippet

// Get the CKEditor Callback
$CKEcallback = $_GET['CKEditorFuncNum'];
 
//pass it on to file upload function
FileUpload( $sType, $sCurrentFolder, $sCommand, $CKEcallback );

Now open the below file and search for the function definition “FileUpload”.

filemanager/connectors/php/commands.php

Here we are going to add a new parameter to the function parameter list, as well as some modification in the body of the function. I would recommend you to replace the entire function definition with the following new function definition

// Notice the last paramter added to pass the CKEditor callback function
function FileUpload( $resourceType, $currentFolder, $sCommand, $CKEcallback = '' )
{
	if (!isset($_FILES)) {
		global $_FILES;
	}
	$sErrorNumber = '0' ;
	$sFileName = '' ;
 
        //PATCH to detect a quick file upload.
	if (( isset( $_FILES['NewFile'] ) && !is_null( $_FILES['NewFile']['tmp_name'] ) ) || (isset( $_FILES['upload'] ) && !is_null( $_FILES['upload']['tmp_name'] ) ))
	{
		global $Config ;
 
                 //PATCH to detect a quick file upload.
		$oFile = isset($_FILES['NewFile']) ? $_FILES['NewFile'] : $_FILES['upload'];
 
		// Map the virtual path to the local server path.
		$sServerDir = ServerMapFolder( $resourceType, $currentFolder, $sCommand ) ;
 
		// Get the uploaded file name.
		$sFileName = $oFile['name'] ;
		$sFileName = SanitizeFileName( $sFileName ) ;
 
		$sOriginalFileName = $sFileName ;
 
		// Get the extension.
		$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;
		$sExtension = strtolower( $sExtension ) ;
 
		if ( isset( $Config['SecureImageUploads'] ) )
		{
			if ( ( $isImageValid = IsImageValid( $oFile['tmp_name'], $sExtension ) ) === false )
			{
				$sErrorNumber = '202' ;
			}
		}
 
		if ( isset( $Config['HtmlExtensions'] ) )
		{
			if ( !IsHtmlExtension( $sExtension, $Config['HtmlExtensions'] ) &&
				( $detectHtml = DetectHtml( $oFile['tmp_name'] ) ) === true )
			{
				$sErrorNumber = '202' ;
			}
		}
 
		// Check if it is an allowed extension.
		if ( !$sErrorNumber && IsAllowedExt( $sExtension, $resourceType ) )
		{
			$iCounter = 0 ;
 
			while ( true )
			{
				$sFilePath = $sServerDir . $sFileName ;
 
				if ( is_file( $sFilePath ) )
				{
					$iCounter++ ;
					$sFileName = RemoveExtension( $sOriginalFileName ) . '(' . $iCounter . ').' . $sExtension ;
					$sErrorNumber = '201' ;
				}
				else
				{
					move_uploaded_file( $oFile['tmp_name'], $sFilePath ) ;
 
					if ( is_file( $sFilePath ) )
					{
						if ( isset( $Config['ChmodOnUpload'] ) && !$Config['ChmodOnUpload'] )
						{
							break ;
						}
 
						$permissions = 0777;
 
						if ( isset( $Config['ChmodOnUpload'] ) && $Config['ChmodOnUpload'] )
						{
							$permissions = $Config['ChmodOnUpload'] ;
						}
 
						$oldumask = umask(0) ;
						chmod( $sFilePath, $permissions ) ;
						umask( $oldumask ) ;
					}
 
					break ;
				}
			}
 
			if ( file_exists( $sFilePath ) )
			{
				//previous checks failed, try once again
				if ( isset( $isImageValid ) && $isImageValid === -1 && IsImageValid( $sFilePath, $sExtension ) === false )
				{
					@unlink( $sFilePath ) ;
					$sErrorNumber = '202' ;
				}
				else if ( isset( $detectHtml ) && $detectHtml === -1 && DetectHtml( $sFilePath ) === true )
				{
					@unlink( $sFilePath ) ;
					$sErrorNumber = '202' ;
				}
			}
		}
		else
			$sErrorNumber = '202' ;
	}
	else
		$sErrorNumber = '202' ;
 
	$sFileUrl = CombinePaths( GetResourceTypePath( $resourceType, $sCommand ) , $currentFolder ) ;
	$sFileUrl = CombinePaths( $sFileUrl, $sFileName ) ;
 
	if($CKEcallback == '')
	{
		SendUploadResults( $sErrorNumber, $sFileUrl, $sFileName ) ;
	}
	else
	{
		//issue the CKEditor Callback
		SendCKEditorResults ($sErrorNumber, $CKEcallback, $sFileUrl, $sFileName);
	}
	exit ;
}

As a final step, we are going to modify the below file and add a new function towards the end of the file

filemanager/connectors/php/io.php

Add the below function towards the end of the file

// This is the function that sends the results of the uploading process to CKEditor.
 
function SendCKEditorResults ($errorNumber, $CKECallback, $fileUrl, $fileName, $customMsg ='')
{
	// Minified version of the document.domain automatic fix script (#1919).
	// The original script can be found at _dev/domain_fix_template.js
	echo <<<EOF
<script type="text/javascript">
(function(){var d=document.domain;while (true){try{var A=window.parent.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();
EOF;
 
	if ($errorNumber && $errorNumber != 201) {
		$fileUrl = "";
		$fileName= "";
	}
 
	$msg = "";
 
	switch ($errorNumber )
	{
		case 0 :
			$msg = "Upload successful";
			break;
		case 1 :	// Custom error.
			$msg = $customMsg;
			break ;
		case 201 :
			$msg = 'A file with the same name is already available. The uploaded file has been renamed to "' . $fileName . '"' ;
			break ;
		case 202 :
			$msg = 'Invalid file' ;
			break ;
		default :
			$msg = 'Error on file upload. Error number: ' + $errorNumber ;
			break ;
	}
 
  $rpl = array( '\\' => '\\\\', '"' => '\\"' ) ;
  echo 'window.parent.CKEDITOR.tools.callFunction("'. $CKECallback. '","'. strtr($fileUrl, $rpl). '", "'. strtr( $msg, $rpl). '");' ; 
 
  echo '</script>';
}

The above function essentially sends back the result of the upload to the preview window. It will alert if something wrong has happened like uploaded an invalid file.

With this we are done with integrating a full featured File Browser in CKEditor.

I hope this tutorial is useful to you. Please post your doubts or questions you may have and I would be happy to respond to it.

PS. I have taken utmost care to place the above code snippets correctly, however my WYSIWYG editor seems to change the PHP and JS code undesirably. If you find any errors/typos in the above code snippets you can check the actual source code files; it would be really great if you can bring it to my notice so that I can correct it and also help you out if possible.

296 thoughts on “Integrating FCKEditor FileManager in CKEditor”

Penuel on April 9, 2010 at 12:49 am said:

@Lee, to sum up i think you need to make two changes:

1. in your initialization code put the full URL for the connector say eg.

filebrowserBrowseUrl :’ckeditor/filemanager/browser/default/browser.html?Connector=http://www.yoursite.com/path/to/ckeditor/filemanager/connectors/php/connector.php’

do this for all file type variables.. In your example, i see only the path after domain name, in past this has caused me few problems, make sure its full url.

2. In your config.php set only the path for

$Config['UserFilesPath'] to correct directory, $Config['UserFilesAbsolutePath'] can be left empty/defautl.

You may also download the working copy from here and and check…

http://www.mixedwaves.com/filemanager_in_ckeditor.zip

Hope this helps
Lee on April 9, 2010 at 11:02 am said:

Thanks Penuel. I think it must be something else, other than the url because if I put the full url to the connector, I get a 403 and 404.
I am going to get someone to have a look at it now, I’ll post whatever they find if helps someone out who might ecnounter the same problem as me.
John on April 11, 2010 at 4:17 pm said:

I’m getting “The server didn’t reply with the proper XML data..” too. In think it’s a Zend problem cause the frontloader wont take a url to link to connector.php.
Penuel on April 12, 2010 at 7:55 am said:

@john, I think it doesn’t have to do anything with Zend as along as you have configured the paths and urls correctly.. I have this working in my Zend application, I added it just as I have done in the tutorial above.
sujeet on April 13, 2010 at 11:49 am said:

Hi there,

Everything working fine, until my client told me that image upload is not working in IE7. I checked it, when you click on UPLOAD -> BROWSE and ‘SEND IT TO SERVER’, it’s giving xml errror..(same old, xml response not in format),
Also, BROWSE SERVER doesn’t show any image.

Everything working fine in other browsers like IE8.

Any idea, please help?
Lee on April 13, 2010 at 3:37 pm said:

These are the changes that were made to make it work for me. The most important I think being the path from the web root, i.e. home/account_name/public_html/.. I hadn’t thought about that. See if any of these alterations help you.
1) in config.php
$Config['UserFilesPath'] = ‘http://www.supertracks.co.uk/karaoke-site/uploads/’;

$Config['UserFilesAbsolutePath'] = ‘/home/supertra/public_html/karaoke-site/uploads/’;

2)functions.php

added http://www.supertracks.co.uk/karaoke-site/editor/

CKEDITOR.replace( ‘editbody’,
{
filebrowserBrowseUrl :’ckeditor/filemanager/browser/default/browser.html?Connector=www.supertracks.co.uk/karaoke-site/editor/ckeditor/filemanager/connectors/php/connector.php’,
filebrowserImageBrowseUrl : ‘ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=www.supertracks.co.uk/karaoke-site/editor/ckeditor/filemanager/connectors/php/connector.php’,
filebrowserFlashBrowseUrl :’ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=www.supertracks.co.uk/karaoke-site/editor/ckeditor/filemanager/connectors/php/connector.php’,
filebrowserUploadUrl :’http://www.supertracks.co.uk/karaoke-site/editor/ckeditor/filemanager/connectors/php/upload.php?Type=File’,
filebrowserImageUploadUrl : ‘http://www.supertracks.co.uk/karaoke-site/editor/ckeditor/filemanager/connectors/php/upload.php?Type=Image’,
filebrowserFlashUploadUrl : ‘http://www.supertracks.co.uk/karaoke-site/editor/ckeditor/filemanager/connectors/php/upload.php?Type=Flash’
});

3) browser.html

var sConnUrl = “http://”+GetUrlParam( ‘Connector’ ) ;
Penuel on April 14, 2010 at 12:51 am said:

@Lee: Its great finally it has worked for you. Just one point i would suggest. instead of doing this:

var sConnUrl = “http://”+GetUrlParam( ‘Connector’ ) ;

in your browser.html, Why won’t you pass the “http://” in your editor initialization code.

So instead of “filebrowserBrowseUrl :’ckeditor/filemanager/browser/default/browser.html?Connector=www.supertracks.co.uk/karaoke-site/editor/ckeditor/filemanager/connectors/php/connector.php’,”

I would make it “filebrowserBrowseUrl :’ckeditor/filemanager/browser/default/browser.html?Connector=http://www.supertracks.co.uk/karaoke-site/editor/ckeditor/filemanager/connectors/php/connector.php’,”

that would avoid your patch in browser.html making it more neat.
Penuel on April 14, 2010 at 1:02 am said:

@sujeet,

I tested this in IE7 and its working fine on my machine.

check out the demo

http://www.mixedwaves.com/filemanager_in_ckeditor/demo.html

on your IE7 and see if the problem persists?
Lee on April 14, 2010 at 10:30 am said:

Thanks Penuel,
I actually hired a freelance javascript guy to find the bug for me, so that I could just have this work and move on with the php. He only charged me a few bucks, but I think he did the http:// thing just to show that he did something other than figure out that I needed to set the path from the web root.
Norman on April 19, 2010 at 7:54 pm said:

Thank you, Penuel. Nice work and much appreciated!
Daniel on April 26, 2010 at 4:05 pm said:

Hi there,
thanks for all the details, but I have a question going a bit further: Is there a possibility to write from an external filemanager not only the URL into the dialog URL field, but also write HTML codes directly into the editor and close the dialog file afterwards?
Have a great day
Daniel
Penuel on April 27, 2010 at 1:51 am said:

Hey Daniel, I don’t believe there is any direct way to do what you are asking. But may be some API, or your own custom file manager dialog can help you with that.
Daniel on April 29, 2010 at 12:22 am said:

Hi Penuel,
I found a way to do it, but there are two disadvantages of my solution. But first the javascript I have used for that:

function WriteAudio(idnr, idlink) {
CKo = window.opener.CKEDITOR;
for (var name in CKo.instances) {
myEditor = name;
}
tText=’[' + idnr + ']‘ + idlink + ”;
var element = CKo.dom.element.createFromHtml(tText);
CKo.instances[myEditor].insertElement( element );
}

Disadvantage 1: it works only if I have not more than one CKEditor instances
Disadvantage 2: the link dialog box remains open after

Do you have an idea how I can close the link dialog box?

Have a great day
Daniel
Penuel on April 30, 2010 at 12:58 am said:

Hi Daniel,

I think I am not able to understand what you are trying to do.. Can you please give me a working example and some instructions which I can download and play with. I think I can help you out with this, provided that I exactly know what you are trying to accomplish.
Daniel on May 3, 2010 at 3:55 am said:

Hi Penuel,
thanks a lot for your offer.
I have developed a customized Browse/File-Manager which is called from the link inserting dialog box (browse server) where I show different ressources from a database. E.g. when somebody is selecting an uploaded audio file I want to insert a div tag into the html-code of the CKEditor instance – like this:

[1234]TitleOfMyAudioFile

The button to insert that div tag is located in my manual browse application with the javascript you have seen in my message before. It works perfectly well, but in the background the link dialog box remains open and my goal is to close that dialog box automatically after writing the html code into the CKEditor instance.

As the project with these functions is only in a protected customer area I can’t give you a link for an example.

Have a great day
Daniel
Daniel on May 3, 2010 at 3:56 am said:

Hi Penuel, just not, that the tags are not shown in this blog
Penuel on May 4, 2010 at 8:43 am said:

Hey Daniel,

The following code will help you close the dialog when you click your custom button..

dialogObj = window.top.opener.CKEDITOR.dialog.getCurrent();
dialogObj.hide();

The above function essentially tries to get the reference of the current active dialog and hides the dialog when using the hide() method. You can place the code after you have inserted your HTML code into the editor and when you intend to close the dialog automatically..

Hope this helps
Daniel on May 4, 2010 at 11:20 am said:

Hi Penuel,

great – thanks a thousand times!

(obvious to say, that it is working )

Have a great day
Daniel
Don on May 6, 2010 at 9:58 am said:

Penuel -

Many, many thanks! With your PHP guidance I have created a *ColdFusion* version of these changes to the old FCK connector.

Your examples were exactly what I needed. It works like a charm and I am delighted.

- Don
Brombomb on May 7, 2010 at 1:07 am said:

Penuel,
Glad you found my code just as helpful as I originally found yours. I enjoyed reading your modifications. I love that open source source can be like that with experimentation and building on top of each others work. Your article is really well put together and was very helpful to get the ball rolling for me.
Penuel on May 8, 2010 at 12:44 am said:

Hey Don,

Its my pleasure that you have been able to make your own ColdFusion version following this tutorial. Good work!

Thanks!
Penuel on May 8, 2010 at 12:47 am said:

@ Brombomb, thanks for coming back. Your code definitely helped to make the browser and this tutorial complete, and that’s the beauty of open source. Thanks again!
martin vool on May 9, 2010 at 9:22 am said:

If you are lazy then you can add this to the filemanager/connectors/php/config.php
You probably have to modifi accorgind to your needs!
My enviroment is as follows:
http://example.com/projects/irunhere <-this is where the page is
http://example.com/projects/irunhere/mcm-up/ckeditor/ <-here are the upload files
http://example.com/projects/irunhere/ckeditor/ <-ckeditor location
http://example.com/projects/irunhere/ckeditor/filemanager <-filemanager location

This patch will make the projects/irunhere stuff irrelevant.

$ex=explode('ckeditor', $_SERVER['REQUEST_URI']); #will give you /projects/irunhere/
$Config['UserFilesPath'] = $ex[0].'mcm-up/ckeditor/' ; #results in /projects/irunhere/mcm-up/ckeditor/

Cheers. It is not hard to do a similar thing to the demo.html (using php to make the hostnames and directories always correct)
martin vool on May 9, 2010 at 9:39 am said:

In my last comment i explained how-to make the path/host irrelevant in the connector. Here is how to do it in the configuration. I use ckeditor/config.js to set the filemanager settings.

CKEDITOR.editorConfig = function( config )
{
…
var ex=window.location.href.split(‘index.php’);
config.filebrowserBrowseUrl =’ckeditor/filemanager/browser/default/browser.html?Connector=’+ex[0]+’ckeditor/filemanager/connectors/php/connector.php’;
config.filebrowserImageBrowseUrl = ‘ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=’+ex[0]+’ckeditor/filemanager/connectors/php/connector.php’;
config.filebrowserFlashBrowseUrl =’ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=’+ex[0]+’ckeditor/filemanager/connectors/php/connector.php’;
config.filebrowserUploadUrl =ex[0]+’ckeditor/filemanager/connectors/php/upload.php?Type=File’;
config.filebrowserImageUploadUrl = ex[0]+’ckeditor/filemanager/connectors/php/upload.php?Type=Image’;
config.filebrowserFlashUploadUrl = ex[0]+’/ckeditor/filemanager/connectors/php/upload.php?Type=Flash’;
…
};

NB:Since the editor is never launched in another location besides index.php i can use this hack.
Grzesiek on May 20, 2010 at 12:30 pm said:

Hi,
Good work.

You can also you free PGRFileManager
Check demo on page: http://demo.pgrfilemanager.onward.eu/

Cheers, Grzesiek
Florian on June 7, 2010 at 8:38 am said:

Thank you for this tutorial. It works gread!
Vlade Divac on June 19, 2010 at 1:44 pm said:

Man thanks a lot!! I was trying to find some any free image uploader for any text editor for a days. This tutorial helped te a lot to solve a problem, othervise i couldnt imagine what to do else, since i didnt find appropriate free text editor+uploader before this one. Good luck!
Penuel on June 21, 2010 at 12:36 am said:

Enjoy
jonathan on July 10, 2010 at 1:41 am said:

Hello and thank you for help in advance!

What folders or files do i set permissions on? i keep getting a permissions denied error pointing to the browser.html file.

thank you again in advance!
JMan on July 14, 2010 at 8:10 pm said:

Genius! Pure Genius! Our company has started to use the CKEditor and all we needed was a file manager. The CKFinder is amazing and all, but we were just looking for something simple (like the FCKEditor’s filemanager, go figure We looked into the Core Five file manager but it doesn’t come with a ready-made ASP connector.

This integration works perfectly; It saved us much time and money, thanks!
Penuel on July 18, 2010 at 10:45 pm said:

@JMan, glad it has helped your company and you. The reason why I wrote this hack instead of bundling it down in a download file is that people can extend this hack and build connectors in their own language of choice and not just limited to php. Thats what you have exactly done. Good work.
Penuel on July 18, 2010 at 11:27 pm said:

@jonathan, i think its not a folder permission issue, but if you are getting this error in the javacscript alert box then most probably you have not set the paths correctly. please make sure that the variables like filebrowserBrowseUrl and others as well as $Config['UserFilesPath'] in config.php. You can debug this easily with firebug addon in firefox. You can get more pointers in my comments to @Lee. He faced similar issues. Hope this helps
Penuel on July 27, 2010 at 11:53 pm said:

Hi,

First off, great work. Very helpful. In the spirit of open source I am a little saddened that such a great piece of software (CKEditor) with a good history has decided to go the route of dropping included functionality to peddle a paid (and overpriced in my opinion) plug-in. Rather defeating of the purpose. I apologize for the rant, but perhaps the good folks at CKSource will take notice of the wide-spread mumbling over this and get back to where they originally found themselves, and their faithful audience.

But I digress. And again, excellent bit of work. I too, like many, am getting the XML error. I am trying to replace an existing FCKEditor with the new CKEditor in a .net site. I had made the changes as directed and simply copied entirely the old filemanager folder from the previous, working version. I felt that there would be no need for mods to the connector.aspx file. So far I have not made any of the upload hacks, I am trying to get the browse features to work correctly first. I can open the filemanager, and the url bar is pointing correctly to the connector as well. I believe that I have the settings for those correct. I think my issue is in the UserFilePath variable in the config.aspx file, as when I test with the link, I get a fresh popup of the XML error whenever I change the file type dropdown.

It is C# code, so I am using a built-in .net function to map the path from the site root, and all folders have pre-existed and functioned in the previous editor, permissions set correctly and all.

Any thoughts or suggestions are welcomed and greatly appreciated.

Thanks again!
Penuel on August 2, 2010 at 3:27 am said:

Hi there, its really sad when things that we are accustomed with suddenly change and that too at drastic level. I too would have appreciated if CK guys would have continued with free basic file manager (that most are accustomed with, and find useful) and released an advanced version at some price (not hurting everybody that were used to). However the FredCK has commented on this topic in one of the blogs that you might like to read.

Regarding the error you are facing, many people have converted the PHP version above to their own languages (coldfusion and ASP); and I am sure you too will be able to do that. The error that you are facing generally arises due to incorrect paths and URLs not specified correctly to browser/upload file in the CKEditor initialization code. Make sure you double check them, also debugging with FireBug would be most helpful, I found it very useful when developing this hack.

Please let me know.
Nabi on August 6, 2010 at 4:17 am said:

Thanyou so much i have integrated in 15 minutes with your help, thank you so much once again.
Pingback: NuBrasil » Blog Archive » Filemanager no CKEditor
cfc on August 10, 2010 at 6:47 pm said:

Whenever I try to “Browse Server”, I get this error:

Error creating folder “redirect:/index.php/” (Can’t create redirect: directory)

If I try to do a quick upload, nothing happens at all.

Any suggestions would be much appreciated.
Penuel on August 11, 2010 at 12:02 am said:

@cfc, i would advice you to make sure all the paths are set according to the instructions in the above tutorial. Most of the issues are due to paths (during in ckeditor initialization and in config.php) not set correctly. Also, are you trying to do this in some framework, like Zend or CakePHP?
abel on August 11, 2010 at 9:03 pm said:

images load into my editor, but when the email is received the image are not visible
Penuel on August 12, 2010 at 12:23 am said:

@abel, i think this question has nothing to do with the integration part, but appears more specific to your program that sends email. I can sense that when you add images through the CKEditor, the images are added with relative paths and not absolute (with complete domain url). This might me the reason, why you are not able to see the images in editor. You need to figure out a way that allows you to add the domain URL or give a kind of reference to it in your images.
cfc on August 12, 2010 at 2:41 pm said:

In case anyone else encounters that “Can’t create redirect: directory” error, it turns out it was a conflict with how I use Apache’s mod_rewrite in my CMS. Odd, since I never encountered a conflict when using FCKeditor, but easy enough to work around now that I know what it is.
abel on August 12, 2010 at 3:25 pm said:

sorry about the confusion with my question. the question I had is, how do i get the full URL to be added to the image path. when the image dialog opens and you add an image from the server, in the URL space, only the the directory shows (/uploads/image.jpg). How do I get it to read the whole URL like (http://www.mysite.com/uploads/image.jpg)
Penuel on August 13, 2010 at 12:45 am said:

@Abel, I am not sure if there is any clean API available to manipulate those image urls but I have a quick dirty way around to get this working. You need to replace two lines of code in two files:

In file: js/ckeditor/filemanager/browser/default/frmresourceslist.html
Search for the following line ( will find this in the OpenFile function)
window.top.opener.CKEDITOR.tools.callFunction( funcNum, encodeURI( fileUrl ).replace( '#', '%23' ));

Replace it with:
window.top.opener.CKEDITOR.tools.callFunction( funcNum, encodeURI("http://www.yourdomain.com/"+ fileUrl ).replace( '#', '%23' ));

needless to say, replace yourdomain.com with your actual domain..

Similary, open the file: /js/ckeditor/filemanager/connectors/php/io.php

and search for below line ( you will find it towards the end of this file)
echo 'window.parent.CKEDITOR.tools.callFunction("'. $CKECallback. '","'. strtr($fileUrl, $rpl). '", "'. strtr( $msg, $rpl). '");' ;
and replace it with:
echo 'window.parent.CKEDITOR.tools.callFunction("'. $CKECallback. '","'. strtr("http://www.yourdomain.com/". $fileUrl, $rpl). '", "'. strtr( $msg, $rpl). '");' ;

again replace yourdomain.com with your actual domain.

The above hacks will append the domains to your image urls and would be added to the editor source..

I hope this helps.
rick wagner on August 23, 2010 at 1:49 pm said:

I keep getting the message box that the file browser is disabled, could you help me to get it enabled!

Thanks
Penuel on August 25, 2010 at 7:17 am said:

@Rick in your config.php set this config variable to true
$Config['Enabled'] = true ;

You can find the config.php here filemanager/connectors/php/
Len on August 25, 2010 at 11:16 am said:

I followed your instructions and, presto, I have it working – in the ASP connector, no less! Kudos and thanks to you.

Since you understand all this, perhaps you can further be the savior for thousands of users by weighing in on an approach to authenticating users. Since the FCK folks haven’t given us any guidance over the years and based on my own efforts, it’s not easy to “… be sure that only authenticated users can access this file or use some kind of session checking.”

I’m an ASP guy. In my implementations, I use ASP session cookies to ensure that users are logged on before they ever see any CFEditor text areas. But once the file manager window pops up, those cookies get lost. I can’t figure out how get by that.

If you don’t “speak” ASP, perhaps you can give me some ideas as to how to handle it in PHP.

Thanks again for sharing your work.
rick wagner on August 25, 2010 at 1:30 pm said:

That’s for your help!! That did the trick!!
rick wagner on August 26, 2010 at 10:39 am said:

I am trying to save HTML code that has small sections of PHP code in it. When saving the data the PHP code is stripped out when using the editor. Is there an override for this?

Thanks,
Rick…
Penuel on August 28, 2010 at 12:36 am said:

Hey Len, Thanks for your comments. Regarding the session handling, I think you will need to do your session checking thing in your connector file.

In my case its /connectors/php/connector.php; This is an important file triggered when the File Browser loads and it triggers certain commands like Getting folders and files etc. We (my team) did some research in past projects to allow creating folders of each user based on user id and they would operate in their respective folders only. This was done by checking and the session values. So basically like a regular script you can start your Session (in php session_start()) in connector.php or any other file being called and restrict the user access to File Browser.

I hope this helps
Penuel on August 28, 2010 at 12:51 am said:

Rick, This one might help you:

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.protectedSource

MixedWaves

in the waves of life