Integrating FCKEditor FileManager in CKEditor

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

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 > 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&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',
		    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.

  • http://www.delovesto.com Tony Payne

    I can’t tell you just how useful this is, having hunted for many hours to try and figure out how to integrate the Browse Server option in CKEditor 3, since my company will not pay for a licence for CKFinder.

    I have made the required changes, downloading your versions from the zip file since our version of Filemanager in FCKEditor was older.

    I changed the domain/folder details as needed, but like others before I have the: “The server didn’t send back a proper XML response (200)” error.

    The only difference I have really made is instead of specifying the settings for “filebrowserBrowseUrl” etc in my HTML, I have set these in my CKEditor config file as follows:


    var baseHref = 'http://www.mydomain.co.uk/';
    var fullPath = baseHref + 'qatest/';
    config.filebrowserBrowseUrl = fullPath + 'ckeditor/filemanager/browser/default/browser.html?Connector=' + fullPath + 'ckeditor/filemanager/connectors/php/connector.php';
    config.filebrowserImageBrowseUrl = fullPath + 'ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=' + fullPath + 'ckeditor/filemanager/connectors/php/connector.php';
    config.filebrowserFlashBrowseUrl = fullPath + 'ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=' + fullPath + 'ckeditor/filemanager/connectors/php/connector.php';

    Additionally in the filemanager/connectors config.php I have the user files path with capitals as follows:


    // Path to user files relative to the document root.
    $Config['UserFilesPath'] = '/UserFiles/' ;

    Any ideas why I might still be having problems?
    I really need to get this working, and even Firebug isn’t helping me right now.

  • http://www.codetoon.com Penuel

    Hi Tony its difficult to tell because looking at what you posted everything seems ok, but i would recommend to check in firebug. Check the response tab, you might find some clue there.

  • http://www.delovesto.com Tony Payne

    I got past the XML 200 error somehow, but now I have a really weird situation.

    When I browse server I see no files, however I can add folders and upload files, and I see those, but for the life of me I cannot find them on the server. These files have to be created somewhere, since they exist when I go into Link on CKEditor and Browse Server again, but having searched the whole server I cannot find them.

    Trying to debug, but getting nowhere. The links that are generated look correct (relative links), but the files do not exist, so I have no idea where they are created.

  • http://www.delovesto.com Tony Payne

    Found it!

    I did reply previously, including a “Thank You” Penuel for your response, but I got a “error: could not read Captcha token file” and the whole comment was lost.

    Seems the settings in the config.php for the connector must have both of the following set in my case:

    // Path to user files relative to the document root.
    $Config[‘UserFilesPath’] = ‘/qatest/UserFiles/’ ;
    $Config[‘UserFilesAbsolutePath’] = ‘/qatest/UserFiles/’ ;

    I had the 2nd setting blank, and it pointed to:
    www/zendcore/htdocs/qatest/UserFiles/
    for some reason.

    Looks like this is now working, very grateful for this excellent tutorial, which is still helping people to upgrade.

  • Christian Yaco

    Hi Penuel. Great and useful work.
    Like Tony Payne I also have the “The server didn’t reply with a proper XML data. Please check your configuration.”
    I’ve work a lot to find a solution for this and I’ve found that:
    – The error occurs ONLY with Firefox or Chrome NOT with IE
    – This is due to the “null” returned by the function SelectSingleNode called by the function GetFoldersAndFilesCallBack in frmresourceslist.html

    The SelectSingleNode function , which is in the fckxml.js file, works fine for IE but returns null for other browsers.
    The statement

    var xPathResult = this.DOMDocument.evaluate( xpath, this.DOMDocument, this.DOMDocument.createNSResolver(this.DOMDocument.documentElement), 9, null);

    returns null and this cause the error.
    I’ve search a lot and tried a lot to find a solutions without success. I’m not an expert of Xpath and Dom Document parsing, so may be you or your readers will give us a definitively solution to this problem that affects a lot of people.
    Thanks
    Christian Yaco

  • http://www.codetoon.com Penuel

    Hi Christian Yaco, that is an interesting find and thanks for your research and posting it here. Most of the time it has been found that such error is thrown when the configurations are not correct. May be the null is returned because something is missing or broken due to incorrect configuration? not sure; but I would advise you to first double check all your configuration or even better download the demo files from the link posted above and try. I know many readers have gone past this error just by correcting their configuration. Firebug coulld be handy. Thanks.

  • Christian Yaco

    RESOLVED!
    It was a bug IN THE FCKEDITOR FILEMANAGER CODE, not in my configuration!
    The problem is that the ‘&’ character remains ‘&’ in IE but it is translated in ‘&’ in FF and Chrome.
    This cause that the regular expression fails to find the value of the “Connector” parameter in the URL passed to the filemanager and so, at the end (after several other steps!), a NULL value is then returned in the SelectSingleNode.

    THE SOLUTION WAS to double check the URL searching bith for ‘&’ and for ‘&’ modifying the GetUrlParam function in the browser.html file (found in the ….\filemanager\browser\default folder ). The function have to be replaced by this one:

    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
    oRegex = new RegExp( ‘&’ + paramName + ‘=([^&]+)’, ‘i’ ) ;
    oMatch = oRegex.exec( window.top.location.search ) ;
    if ( oMatch && oMatch.length > 1 )
    return decodeURIComponent( oMatch[1] ) ;
    else {
    return ”;
    }
    }

    Now all works fine in IE, FF and Chrome.
    Hope this will be useful. I’ve spent several hours fixing it.

  • http://www.codetoon.com Penuel

    Great. Thanks for your effort, I will try updating the functions after checking so that no one else gets such problem.

  • Christian Yaco

    Note that in my previous post there is a problem because the “& amp;” text is translated by HTML in ‘&’ so you will read in both case ‘&’ !!!!!
    I rewrite here the post using “& amp;” (I’ve inserted a space between & and amp; ). (if you will use the code remember to delete the space!):

    RESOLVED!
    It was a bug IN THE FCKEDITOR FILEMANAGER CODE, not in my configuration!
    The problem is that the ‘&’ character remains ‘&’ in IE but it is translated in ‘& amp;’ in FF and Chrome.
    This cause that the regular expression fails to find the value of the “Connector” parameter in the URL passed to the filemanager and so, at the end (after several other steps!), a NULL value is then returned in the SelectSingleNode.

    THE SOLUTION WAS to double check the URL searching both for ‘&’ and for ‘& amp;’ modifying the GetUrlParam function in the browser.html file (found in the ….\filemanager\browser\default folder ). The function have to be replaced by this one:

    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
    oRegex = new RegExp( ‘& amp;’ + paramName + ‘=([^&]+)’, ‘i’ ) ;
    oMatch = oRegex.exec( window.top.location.search ) ;
    if ( oMatch && oMatch.length > 1 )
    return decodeURIComponent( oMatch[1] ) ;
    else {
    return ”;
    }
    }

    Now all works fine in IE, FF and Chrome.
    Hope this will be useful. I’ve spent several hours fixing it.

  • http://www.colorvibes.in Gini

    Hi,

    I am using ckeditor with kcfinder.
    What my problem is in image insertion. I am able to browse, upload and insert image; but path is just “/images/picture.jpg”. But picture is there in actual upload path.
    How to resolve this issue.??
    please help.

    Thanks in advance…

    -Gini

  • Jamie

    Hi Penuel,

    This is a magical application. It works perfectly on my windows server, but it errors out when I use a Linux server. I’ve installed it several times and configured it as you’ve advised but it doesn’t seem to want to work.

    Have you seen these errors before?

    The below is from Chrome’s debugging tool:
    Uncaught TypeError: Object [object Window] has no method ‘OnUploadCompleted’

    And firebug outputs:
    window.parent.OnUploadCompleted is not a function

    It’s as if it can’t see OnUploadCompleted, but I can’t see why.

    Thanks
    Jamie

  • Ayoub

    Thanks for this great solution, I have been struggling a lot of hours to find a solution.
    Thanks a lot.

    Thank you Christian Yaco for the modified function, it did solve the problem.

  • Aneesh

    Hi,

    Can you give any help to include it in asp.net mvc project. I searched whole day to find an free image uploader/explorer for ckeditor in asp.net mvc but no use!!. Please help..

  • shashi

    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 does not sets the file URL to the preview window in the dialog box, when user selects a file in the File Manager. it also does not close the main file window for preview.

  • Andrew

    Hi Penuel,

    I trying on my localhost, and i get this error
    The HTTP verb POST used to access path ‘/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/upload.php’ is not allowed.
    Does the filebrowserUploadUrl, filebrowserImageUploadUrl, filebrowserFlashUploadUrl support localhost domain? Any idea to write infront domain for localhost.

    filebrowserUploadUrl: ‘…….filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/upload.php?Type=File’

  • Andrew

    Hi Penuel,

    Im using MVC4 and when i deploy to server, I found out all my php file is not exist. Any idea?

  • BadLuck

    Hi.

    I have a similar problem to Tony Payne.

    I can’t see files on the server AND I can’t to add folder/upload files. I don’t get any erros.
    I’ve set this:

    // Path to user files relative to the document root.
    $Config[‘UserFilesPath’] = ‘/userfiles/’ ;
    $Config[‘UserFilesAbsolutePath’] = ‘/userfiles/’ ;

    Sadly, it’s still isn’t working.
    If someone has any idea on how to fix this, please let me know.

  • http://billkurtson.se Bill

    I have the same problem as both Jamie and BadLuck.

    I get the “TypeError: window.parent.OnUploadCompleted is not a function”

    and I also can’t see or upload files with “browse server”.

    It’d be awesome if you could help out, because if this worked it would be a reaaally nice instruction site for this.

    Hope to hear from you soon!

  • http://www.codetoon.com Penuel

    Hi Bill,

    Did you try the download the package from this link?

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

    Or did you try what Tony did as a fix?

    Also remember at times there is problem with URLs. for example if you configured with urls without www. and trying to access the editor over a www. url (or vice versa) it may throw an error make sure you are on the same url

  • Bohdan

    How to enable the ‘Upload’ tab for quick upload of files on aspx conector ?

  • http://grcdblus.com vedradijaus

    Thanks for sharing dear you are really doing a wonderful job.

  • Lukasz

    Hi
    I must say that tutorial is a huge job. Thank you for it.

    I got the code from your site and implement it into my php pages. Everything is working well but I’ve got one problem. After selecting file it doesn’t happen anything. I can browse locations, add files and folders but don’t get response after selecting a file.
    I integrate CKeditor config into config.jf file
    config.filebrowserBrowseUrl = ‘http://192.168.5.101/ckeditor/filemanager/browser/default/browser.html?Connector=http://192.168.5.101/ckeditor/filemanager/connectors/php/connector.php’;
    config.filebrowserImageBrowseUrl = ‘http://192.168.5.101/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=http://192.168.5.101/ckeditor/filemanager/connectors/php/connector.php’;
    config.filebrowserFlashBrowseUrl = ‘http://192.168.5.101/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=http://192.168.5.101/ckeditor/filemanager/connectors/php/connector.php’;
    config.filebrowserUploadUrl = ‘http://192.168.5.101/ckeditor/filemanager/connectors/php/upload.php?Type=File’;
    config.filebrowserImageUploadUrl = ‘http://192.168.5.101/ckeditor/filemanager/connectors/php/upload.php?Type=Image’;
    config.filebrowserFlashUploadUrl = ‘http://192.168.5.101/ckeditor/filemanager/connectors/php/upload.php?Type=Flash’;

  • gug

    Hi,
    I have try ur code working fine in chrome browser.But image upload not working in mozilla browser.It comes error image source url is missing.Plz reply me.

  • gug

    Hi,
    I have try ur code working fine in chrome browser.But image upload not working in mozilla browser.It comes error image source url is missing.

  • gug

    Hi,
    I have try this code working fine in chrome browser but in mozilla showing error image source url is missing.Can u help me???

  • http://www.spacerock.com Marian Stevens

    Hey thanks for this but I can’t get the file upload to work, and I get an xml error when the browse server window pops up and googled it for a solution but came up empty.

    “The server didn’t reply with a proper XML data. Please check your configuration” Therefore, the upload hangs and never really happens. I’m also wondering where the files are supposed to be going.

    I’ve used CK Editor for years (and its predecessor FCKEdit) and it’s been hit and miss getting the file browser feature to work. Can anyone help?

  • Pingback: Anonymous()

  • Rakesh

    Thank you for all your help.
    I got it working using aspx files, great tutorial and I had some fun debugging jquery too, wasn’t fun until I found what my specific issue was!

    Kudos to you.

  • http://www.webdesignbusinesskits.com/ John Romaine

    It would be useful if you told us what version this was for. What version is this tutorial for?????

  • Elroco

    All i can say “Christian Yaco” is a jolly legend….
    Thanks so much for your fix with the “The server didn’t reply with a proper XML data” issue….

    One thing I would like to add is not only do you need to remove the space between “&” and ” amp;” as you mentioned you will need to replace the single quotes around the regular expressions and the final return if using copy paste…. as they are also messed up by this pages editor….

  • http://www.hoclaptrinhweb.com hoclaptrinhweb

    thanks all

  • http://www.facebook.com Deval Shah

    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 does not sets the file URL to the preview window in the dialog box, when user selects a file in the File Manager. it also does not close the main file window for preview.

  • francisco

    por favor .. alguien podria poner la base de datos o la estructura.
    Muchas gracias

  • francisco

    por favor … alguien puede poner la base de datos …
    Gracias

  • Iram

    Excellent Tutorial, a great step by step guide to integrate the file manager. Thank you !!!!!!!

  • http://consultorseovalencia.com Carlos

    It is incredible the official documentation dont explain anything. Thanks for your information

  • Ben Perez

    Has anyone been able to accomplish this for asp classic?

  • Alberto

    Hi! Thanks for the great guide but i can not make it works…So i try to use your demo.zip, put it in localhost, but i have always the problem of “The server didn’t reply with a proper XML data. Please check your configuration.”.
    How can i solve this? PS. I don’t change the path in demo.html: filebrowserImageBrowseUrl : ‘js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=http://kodemaster.co.cc/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php’,
    Thanks in advance to anyone who helps me 🙂

  • http://www.codetoon.com Penuel

    Alberto, you will need to change the paths to point to directory where you placed your connectors. Since its in localhost, it will most likely begin with localhost url and not kodemaster url. Its is pretty simple if you go through the above post carefully.

  • Nebojsa

    Hi!
    I have problem with file browsing.
    I put code:
    CKEDITOR.replace( ‘tekst’,
    {
    filebrowserBrowseUrl :’../ckeditor/filemanager/browser/default/browser.html?Connector=ckeditor/filemanager/connectors/php/connector.php’,
    filebrowserImageBrowseUrl : ‘../ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=ckeditor/filemanager/connectors/php/connector.php’,
    filebrowserFlashBrowseUrl :’../ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=ckeditor/filemanager/connectors/php/connector.php’,
    filebrowserUploadUrl :’../ckeditor/filemanager/connectors/php/upload.php?Type=File’,
    filebrowserImageUploadUrl : ‘../ckeditor/filemanager/connectors/php/upload.php?Type=Image’,
    filebrowserFlashUploadUrl : ‘../ckeditor/filemanager/connectors/php/upload.php?Type=Flash’}
    );
    And in new window I’ve got warning “The server didn’t reply with a proper XML data. Please check your configuration”. There’s no folder list or root as well.
    Please, help me.

  • Nebojsa

    OK, I managed to “remove” alien message about XML, but still it doesn’t work. It doesn’t show root and when I select the image in “browsing”, it start to upload it somewhere, but never finish uploading. In my opinion the problem is that the browser doesn’t see the root on the server (localhost in this paticular case).

  • http://doksoft.com Dmitriy

    I may suggest the easiest solution for file uploading in a couple of clicks. No filemanages: the key feature is the speed and comfort of file attaching. The best way to let users attach images to their posts for example.
    DOKSoft Quick Image Upload plugin: http://doksoft.com/soft/ckutils/index.html

  • Ziad

    Hi, thank you for this helpful post!
    i was looking to use a crop tool for the images after upload, any thoughts?
    thanks

  • http://www.jesusweb.es Diseño web

    I need it info. Thank for sharing. Good info.

  • Nagendra

    I’m trying to upload the images using the editor, I’ve downloaded from the link & followed the above procedure..but I’m getting this error in the console
    “NetworkError: 404 Not Found – http://localhost/baseprj/filemanager_in_ckeditor/js/ckeditor/images/?CKEditor=id_body&CKEditorFuncNum=2&langCode=en
    pls help me what to do..!

  • bert

    Very nice explination. I use this with CKEditor in a clasic ASP environment.
    But now with the upcomming of IE10 one of my Content Managers foces me on a issue. With IE10 the file manager won’t display files in the “Browse Server” modes.
    I used your demo with IE10 and it did not work. Yours is based on PHP mine on ASP. In Firefox and Chrome it works great. I installed already the latest version of CKEditir 4.x, but still same result. Have you or anybody a solutions for this.
    Thanks in advance, Bert.

  • http://www.ok-roms.com Kaveh Rassoulzadegan

    For those that are still stuck with the wrong XML response, also check if you are not, upon some requested URL, redirecting to another page in a .htaccess file placed on your website root folder. That was the cause of my flavor of the problem. After removing the redirection the error disappeared and I could create folders / upload files right away.

    In my case, also using the init part of ckeditor …Type=Image&Connector… was also an issue solved by using ‘&’ rather than ‘&’. I guess the problem was due to the fact that I am generating the ckeditor from a dotclear theme page.

  • Prateek Jaiswal

    Thanks a lot

    its work for me 🙂

  • madhu

    i need java integration

  • madhu

    plz any give the JSP Integration Pack URL,i need connectors for jsp