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”

Sorry – that didn’t come out right: try again!

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

I changed it to:

echo 'script type="text/javascript">';

Rick Wagner on October 29, 2011 at 1:16 pm said:

Hi,
Tried to get this to work and failed:
Can you give me the specific directory, I think I changed it in the wrong file.
Thanks, Rick

Inside your connectors/php/config.php you can see the variable set as:

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

You can set to something else like

// Path to user files relative to the document root.
$Config['UserFilesPath'] = ‘/userfiles/XXXX/’ ;
Penuel on October 31, 2011 at 4:07 am said:

HI Rick the exact location is ckeditor/filemanager/connectors/config.php
Penuel on October 31, 2011 at 4:22 am said:

Hi Mark,

Thanks for bringing it to notice. Actually the code blocks are often removed or misinterpreted by the WYSIWYG editor of WordPress so the code in the last function you edited was removed somehow, I have corrected the function again and it should be fine now. Or on the safer side try downloading the Zip file (download link in article) which contains all required code.
Rick Wagner on November 2, 2011 at 8:31 pm said:

Hi Penuel,

HI Rick the exact location is ckeditor/filemanager/connectors/config.php

Sorry to keep asking you this, but I don’t have this directory in ckeditor ??
Any ideas??
Rick
Joop Stringer on November 18, 2011 at 2:02 pm said:

This helped me out …
now modifying it for Classic ASP
Penuel on November 19, 2011 at 12:15 am said:

Great Joop!. Please do post a link once you have it ready so others could be benefited.
Danny on November 19, 2011 at 1:48 am said:

Hi,
I’ve a little problem making it work properly, I’ve spent the day trying different solution to make it work but it didn’t. Everything is working properly, but when I browse and click on the image that I want, It doesn’t get the link. Same thing when I upload a picture, it doesn’t get the link. The upload work well, the browsing work well, I’m just not able to insert any image in the page.
Jon on November 19, 2011 at 6:09 am said:

Many thanks for the tutorial. I have tried to do an ASP.NET integration just for browsing and selecting images for the Image button. I decided to use the CKEditor config.js file to set filebrowserImageBrowseUrl as I wanted to have a purely declarative solution without the need for any Javascript coding. Had a problem for a while with the url getting scrambled (I see in the browser.html code that there is a Gecko issue when using relative URLs which do not start with a slash – well this seems to be an issue for IE9 as well). I also had an issue with config.ascx (the ASP.NET of config.php) which required me to add the FCKeditor .dll into the bin directory (which you did not mention for php). And then getting the UserFilePath correct was a pain. But I eventually got the popup to list the image files in my directory. However, without your modification to frmresourceslist.html, clicking on any image file name causes an error in the OpenFile function as it seems that CKEditor does not have a SetUrl method, as discussed at http://cksource.com/forums/viewtopic.php?t=15618. However, if I try to make any modification to frmresourceslist.html (even just inserting the GetUrlParam function and not changing OpenFile!), no files are listed in the popup! I have tried this several times and cleared the browser cache etc and cannot understand it. Any ideas?

And, by the way, is there any easy way of turning off the upload feature without modifying the code?

Jon
Jon on November 20, 2011 at 8:05 am said:

Of course as soon as I submitted my previous post I realised my rather silly error – I had copied your code from this page which includes a > in the GetUrlParam function. Yet another example of why I hate Javascript – no meaningful diagnostics and random results which do not appear to relate in any way to the cause of the problem!

But I still have the question about turning off the upload and create folder functions. Not setting filebrowserImageUploadUrl means that there is no Upload tab in the Image dialog, which is fine, but there are still upload and create folder features in the file browser window. Is there a property which can kill these or do I have to rip the code apart?
Joop Stringer on November 21, 2011 at 9:38 am said:

Will do so IF I can get it to work
Struggling with the FileManagers internals … can’t see the files in the browser.
Danny Hebert on November 21, 2011 at 1:39 pm said:

Hi,
Thank you for your amazing work, so much easier with your documentation than the original one from the website.

I’ve work a whole day on a issue that I’m not able to find the solution, Everything works really well, I’m able to upload, I’m able to browse and see the files, but when I select a file it doesn’t do anything, doesn’t transfer the URL in the page to make the picture appear. Same thing with the Send page, it send the file but doesn’t put the link in the main page. Could it be a problem with the Javascript?

Thank you for your time.

Danny
Richard on December 3, 2011 at 10:21 am said:

i tried to implemented this.
but when i click browse server.
it always show a message:

The server didn’t reply with a proper XML data. Please check your configuration.

how can i fix this?
Internapse on December 8, 2011 at 3:35 pm said:

I used this tutorial so I could upgrade FCKEditor to CKEditor but use the same filemanager instead of upgrading to CKFinder.

Like many who have tried this method, I received the error “The server didn’t reply with a proper xml data” and was unable to upload photos.

Where I defined the Browser and Connection URLs, the tutorial above and many others that I read while searching for a solution used & for the ampersand. After tons of searching, I ended up switching this to just & (without the extra amp;).

Tutorial:
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’,

Final:
filebrowserImageBrowseUrl : ‘/total/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=/total/ckeditor/filemanager/connectors/php/connector.php’,

When I took out the amp; I received an actual error message stating that my path was incorrect (I had changed it at the suggestion of another “solution”). It turned out that the problem was literally the ampersand in my case, or at least that’s what it certainly seemed like.

Hope this helps somebody!
Alex on December 20, 2011 at 5:27 am said:

Penuel,
Thank you SO much for this awesome tutorial. I was beating my head against a wall for most of the night while trying to figure out ckEditor’s documentation.
I was able to implement the GetUrlParam function and the edited OpenFile function (I used the previous version with my fckEditor implementation).
I built a custom image browser that goes through my database table of uploaded images and simply builds a link using the function OpenFile(‘url_to_image’).
It works like a charm now!
Thanks again!
Foo on December 30, 2011 at 1:50 pm said:

Great site,

however, one major problem is left untouched: the rightclick menu that normaly should pop up, and gives you options like rename or delete, plus a few other image informations, isn’t there.

I downloaded the working demo and just changed the config and paths. Is this function left out, or is it a problem on my site? I wonder, that noone else has brought up this isue.
Penuel on December 30, 2011 at 1:57 pm said:

Its not supported. The tutorial is about integrating the FCKeditor file manager with new CKEditor, but you can enhance the filebrowser or may try to integrate the newer version of filebrowser that has the functionality you require.
Deric on January 18, 2012 at 5:36 pm said:

Hi Penuel,

Thanks for the tutorial! Great one!

I have installed and it work well, except for in page/Custom toolbar, doesn’t this support custom toolbar?
Patrick on January 20, 2012 at 2:31 pm said:

Thanks for your hard work and an easy to follow tutorial.

Worked like a charm!
Penuel on January 20, 2012 at 4:59 pm said:

Thanks Patrick, Glad it has been useful
Penuel on January 20, 2012 at 5:00 pm said:

@Deric, I am not sure which feature are you talking about.
Raj on February 1, 2012 at 1:46 pm said:

Hi Penuel,

I am thankful to you for providing this code. I have downloaded your code and tried in my local system. The image uploading is working only when i am uploading from upload tab, but it is not working for image info and link. Because i think you gave in demo.html the following code..
filebrowserBrowseUrl :’js/ckeditor/filemanager/browser/default/browser.html?Connector=http://kodemaster.co.cc/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php’,
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’,
filebrowserFlashBrowseUrl :’js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=http://kodemaster.co.cc/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php’,

So it is showing your online image directory structure. But when i tried to change it to my local image directory structure it is not working.

So can you please help me in this issue. When i click Imageinfo browse or link browser button it has to show my local directory structure. So how i have to do this..

Thanks Inadvance…

Raj
Raj on February 2, 2012 at 9:05 am said:

Hi Penuel,

I am thankful to for your script. I am able to upload images from upload option but i am unable to upload images from image info or link option. Because when i clicked brose option in images info or link tab it is showing your directory structure, because you gave your online link for browse option. But I want to view my directory structure, then only i can upload my images in my server. Can you please tel me where i need to change to see my directory structure..

Thanks Inadvance…

Raj Kiran
Penuel on February 2, 2012 at 9:09 am said:

Hi Raj, Please make sure you changed the domains and path to match your domains. Also make sure you set the path in UserFiles variable in config.php. You can find instructions about it in the tutorial.
sameer on February 13, 2012 at 8:55 am said:

hey penuel first of fall congrats for the plugin . I am facing an issue here . I have deployed your example in apache and even in tomcat . In apache after editing demo.html for filebrowserBrowseUrl to my folder it works fine . but in tomcat I am getting ‘The server didn’t reply with a proper XML data. Please check your configuration’ . Is there any additional configuration required for tomcat . By the way which server have you used ?
Penuel on February 14, 2012 at 2:33 am said:

Hi Sameer i don’t believe there is any specific configuration to run it on tomcat, but might be due to any platform diffs you might have to make some adjustments.. the best way to debug the problem is use firebug and I am sure you will pretty much get the idea of the problem.
sameer on February 16, 2012 at 2:59 am said:

ok fine i’ll debug . Can you tell me how can default tab in image plugin be upload (when we click on the image plugin default tab should be upload )
Hetal on February 16, 2012 at 8:02 pm said:

It works well, I have used classic ASP
Let me know, If anyone need help in asp.

Thanks,
Hetal
Danh on March 2, 2012 at 4:45 pm said:

Hi all,

Sorry that I cannot follow your instructions because I am a newbie in this field. So, I am very grateful if anyone explain me things in step-by-step.

Thanks a lot in advance.
Danh
Danh on March 3, 2012 at 4:55 am said:

Hi Hetal,

I am a newbie in ckeditor, and tried to download the source code above. But the upload tab is inactive. After I click the button Send it to server, nothing happened.

Could you please upload your updated source-code files?

Thanks a lot in advance.

Danh.
Pingback: WUSIWUG Browser | Johnathan Kong
NV on March 24, 2012 at 9:27 am said:

Hi Hetal ,

Can you share your asp coding ?
dioz on April 3, 2012 at 4:00 pm said:

THANK YOU!
manu varghese on April 3, 2012 at 5:23 pm said:

Hai Penuel
U done a great work.congrts.
I have pblm that‘The server didn’t reply with a proper XML data. Please check your configuration’ . and it will be cleared after I have give the correct location of my webserver and the word ‘&’ to exactly ‘&’

Thanks and Regards
Manu
Joe Joe on April 7, 2012 at 12:52 am said:

Hetal and All,

Any news on the ASP Code? I am doing it now and will share when I am done, and then I have to get it to work for the ASP.Net side – but anything you may have to lessen my deadline would be very appreciated. Thank you!
Joe Joe on April 9, 2012 at 11:16 pm said:

Hello,

Can anyone share any code on how this can be accomplished in ASP and/or ASP.NET? It is vital to my survival. I am still trying to get it to work, but I can’t even get the “Browse Server” button to show up…
horst on April 20, 2012 at 3:06 pm said:

hey pen,

it seems i encountered a problem. i followed your instructions and it works. whats not working, is the preview of my pictures in filemanager window. it is empty, but pics are already on the server. when i paste your 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 ” ;
}

dreamweaver is highlighting this part as syntaxerror:

if ( oMatch && oMatch.length > 1 )

is this > wrong? should it be a > or something else?

thanks in advance
Penuel on April 20, 2012 at 3:10 pm said:

@horst, Yes you are right > shouldn’t be there.. it should be instead greater than comparison operator. Sorry my WP editor seems to switch the code undesirably. You may also download the file from above link
horst on April 20, 2012 at 3:28 pm said:

okay, thank you. changed it now, but doesnt have a preview at all… seems the filemanager window does not loading the content… do i have to tune a link somewhere? all other functions work well.
Penuel on April 20, 2012 at 3:33 pm said:

I think if you followed it correctly, it should work.. but anyway there is download link http://www.mixedwaves.com/filemanager_in_ckeditor.zip

which you can download and compare.
Bhavin Doshi on April 20, 2012 at 11:48 pm said:

Hi Hetal,

Hope you are well.

I have seen your post that you have managed to implement this in classic ASP.

I would be grateful if you can share the ASP code which needs updating on the following files:

upload.php
commands.php
io.php

Many thanks in advance.

Regards

Bhavin Doshi.
Reinier on April 29, 2012 at 4:45 pm said:

Hi Penuel,

First of all thanks for this, it’s a great tutorial.

I ran into a couple of problems, first I also got the message “The server didn’t reply with a proper xml data”. I tried altering the links to:
filebrowserBrowseUrl :’http://example.com/filemanager_in_ckeditor/js/ckeditor/filemanager/browser/default/browser.html?Connector=http://example.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php’

where example is obviously my site. This fixed the message, i was able to upload pictures but when i clicked the image it wouldn’t return to the other window and insert the image. After debugging i found out my links were still off.

The problem was that ajax can’t access maps above it’s own, so i told it to go to http://example.com/ whereas that link wasn’t allowed to be accessed. The solution to the problem was to get rid of the ‘link part’:
filebrowserBrowseUrl :’js/ckeditor/filemanager/browser/default/browser.html?Connector=../../connectors/php/connector.php’

as you can see there is no more example.com in the link, this fixed all the problems for me and now it works like a charm

Hope this helps some people!

Regards

Reinier
Penuel on April 30, 2012 at 12:05 pm said:

Reinier, thanks for your troubleshooting tips and I believe it will help some body here.
Mosh on May 15, 2012 at 2:31 am said:

Thank you!
I looking for this a lot of time!!
Pingback: Tutorial: Using FCKEditor FileManager in the new CKEditor | Blog Of 'Dean Williams'
Rodrigo on May 24, 2012 at 8:55 pm said:

Hello How can I use MVC Razor?
Hamzeh on May 27, 2012 at 2:55 pm said:

how to implement this in asp.net ?
Gary Newport on May 29, 2012 at 8:39 pm said:

First of all, thank you so much for this; it helps reduce the workload or everyone else! )

I have implemented everythign as stated but my one issue is that I wanted the images to placed in the images/uploads section of the website (where images is off the root of the site). Initially it added the UserFilesPath data to the ckeditor\filemanager\connectors\php path. To resolve this I changed the parameter to ../../../../images/uploads.

Not only is this ugly but it also means that the URL given in the parameter box is exactly the same. Therefore the preview fails and the insertion fails. If I rectify the input box reference then the preview appears without issue as does the image in the document. How can I set it to upload to the images/uploads folder from the root of the site whilst not using this ugly and incorrect reference within the input box?

Or more directly, how do I stop the whole system going from ckeditor/filemanager/connectors.php?
Gary Newport on May 29, 2012 at 8:44 pm said:

Don’t worry; found the solution myself! DOH! )
horst on May 31, 2012 at 2:27 pm said:

Penuel,

is there a chance that you implement the right click menu on pictures, so that they can be deleted or renamed?
thanks

MixedWaves

in the waves of life