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://ckfinderfilebrowser rick wagner

    Thanks Penuel,

    Any chance you could give me an example of using the protectedSource? I saved it in the config.js file but the PHP code is still being striped out on the save of the textarea.

    Thanks,
    Rick…

  • http://ckfinderfilebrowser rick wagner

    Thanks Penuel,

    Any chance you could give me an example of using the protectedSource? I saved it in the config.js file but the PHP code is still being striped out on the save of the textarea.

  • http://ckfinderfilebrowser rick wagner

    Penuel,

    Thanks for all your help! I got this issue resolved!!

    Thanks,
    Rick…

  • Len

    Thanks for the feedback regarding sessions you gave a couple of days ago. I had already tried your suggestion without success. My problem may have to do with how I use IIS virtual directory pointers. I’ll revisit that issue.

    But for now, I’ve run into a problem with the integration code that I didn’t catch initially. If a user uploads an image file containing spaces, the preview window will not display it. It will show a red X instead. If you click OK, it will insert it into your textarea OK, but not having the preview causes panic with some users. The same behavior happens if the file name contains a # (pound sign). I’m not overly concerned about the # but uploaded files often have spaces in them.

    Do you see the same behavior in your testing? Got any suggestions?

    Thank you again for sharing.

  • Penuel

    Len, Good catch. Its a bug, its incorrectly encoding the space in file name. when added to the textarea its correctly encoded. Will look into it. Thanks for bringing it to notice.

  • Penuel

    Well done Rick :)

  • Pingback: Tích hợp FCKeditor FileManager vào CKEditor - Rau Cần

  • Leah

    Hi,

    I’m building an ASP.NET website and in the process of integrating the CKEditor into it, to use it as my content editor. I also need to be able to upload images to display within the content and so I am using the this guide.

    I came across a few issues along the way, but they seem to be resolved now. The error I’m getting now is:

    “This connector is disabled. Please check the “editor/filemanager/connectors/aspx/config.ascx” file.”

    The way I understand it, the ‘Enabled’ boolean value in the config.ascx file just needs to be set to ‘True’. I’ve done this so I’m at a bit of a stuck point and don’t know what else to try.

    If someone could please help me with this, I would really appreciate this – I’m really stuck with it.

    Thanks very much.

  • Brad

    SendCKEditorResults is different from your demo code, was this a typo or new code?

    -Brad

  • Penuel

    Thanks Brad for bringing it to notice. The TinyMCE of WordPress editor stripped off the code, when i last updated the article I think. I have added the code again and it should be correct now.

  • http://www.zumcom.nl/jeugdspartaan/filemanager_in_ckeditor/demozum.php Jo

    I’m trying to get your integrated file manager at work..

    It is on my site now. But when I want to upload an image I get this error:

    Error creating folder “/filemanager_in_ckeditor/userfiles/” (mkdir() [function.mkdir]: Permission denied)

    Anybody any idea what’s wrong?
    http://www.zumcom.nl/jeugdspartaan/filemanager_in_ckeditor/demozum.php

  • Len

    Your GetUrlParam function has encoded & instead of the raw &.

    I’m not sure how the text above will be encoded once I submit it, but you get the idea.

    If I might, I would like to make my case for you to revisit the bug that bites if a user uploads an image file containing spaces. Here’s my workaround:

    funcNum = GetUrlParam(‘CKEditorFuncNum’) ;
    // window.top.opener.CKEDITOR.tools.callFunction( funcNum, encodeURI( fileUrl ).replace( ‘#’, ‘%23′ ));
    window.top.opener.CKEDITOR.tools.callFunction( funcNum, encodeURI( fileUrl ).replace( /%2520/g, ‘%20′ ));

    As you can see, I’ve elected to handle spaces versus pound signs. I don’t know how to code to do both.

  • Mike

    @Penuel: I have a problem… When I use your demo, after setting all config vars, connectors/test.html works just fine with php and the target image folder. But when I click the Browse Server button the popup gives an alert: The server didn’t reply with a proper XML data. Please check your configuration.
    If I check FireBug Net XHR Response, I get the message: Failed to load source for: http://www.***.nl/web/admin/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php?Command=GetFoldersAndFiles&Type=Image&CurrentFolder=%2F&uuid=1287062552365
    But when I open this link in a new tab, the xml is just fine and the same as returned by test.html

    I’m lost, have any idea?

  • Penuel

    @Mike you don’t get any response in Firebug? also make sure the domain names are correct including with & withou www prefix. I had problem with this, when i opened the website without www, say i open the website in browser as http://mixedwaves.com/ but the editor code still refers to http://www.mixedwaves.com/ which causes the problem. This can be solved by fetching in runtime the domain where the editor is running. Please let me know if that is the case.

  • Mike

    @Penuel: Thx, that solved the problem. I forgot that cross site ajax is prohibited… Why not use JSONP to avoid this would you ask yourself…

  • Penuel

    Mike, Good to know that has solved your problem. Regarding cross domain AJAX i really don’t see any need of doing it here, but yes you can make the code portable so that such problems won’t arise by dynamically determining the host and path instead of hard-coding them in ckeditor initialization code.

  • echo

    Hi Penuel,

    Thanks for your great tutorial, I have tried your code with my own testing site’s path (a site in localhost) and both the “browser server” and “quick upload” are worked. But I would like to ask if I only want to use the “quick upload” part of function then what should I do?

    Sorry to take your time, though I know C/C++ and have been working for PHP for few months but Javascript is still pretty new to me and frankly I still can not understand the syntax of CKeditor so far.

    Thanks for any help in advance,

    echo

  • Penuel

    @echo you disable the browser server button by simply removing the following three lines from the editor initialization code:
    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’,

    So the new initialization code should look something similar to below code:

    CKEDITOR.replace( ‘editor1′,

    {

    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’

    });

    Note, this removes the browser server button from the info tabs of “Image”, “Link” and “Flash” dialogs and the not the tab itself. Hope this helps you.

  • echo

    Dear Penuel,

    Thanks for your kind response.

    Actually, I did what you said before I post my question, but both IE and Firefox showed errors. However, by your kind answer, I tried it again and after I pressed the reload button (F5) few times then everything got back to the track. Guess my system is reluctant to clean her cache. But you are still the Genius for saving me out of the hell of not-sure-about-the-autual-problem.

    It is quite ridiculous though, but I always feel that even program language would like to bully the novice! -;(

  • waseem

    Error creating folder “/var/www/html/userfiles/image/” (Permission denied)

    Hi,Penuel

    I get the above error when i tried to upload an image Please… Can u tell me the problem?

  • http://www.codetoon.com Penuel

    please make sure you have the ‘userfiles’ folder (usually under root) and necessary permissions to create sub-folders underneath it.

  • waseem

    Thanx… I gave the path correctly but the image is getting uploaded but am not able to c the uploaded image in the CK edtior :-(.. .. Should i change the path i.e.,

    $Config['UserFilesPath'] = ‘../../../../../../images_uploaded/';

    /images_uploaded/ is in root

    And am calling the CKeditor from a different file ..So how i will i set my file path show that images is visible in CK editor..
    :-(

  • ankur

    hi, i get the following error:

    Parse error: syntax error, unexpected ‘;’ in /home/content/56/6773356/html/test/admin/ckeditor/filemanager/connectors/php/commands.php on line 175

  • http://www.snl-essonne.org Roger Astier

    Your page is very interesting ; I use it to use the filemanager in CKEditor.
    It was also a brain teaser whith an error on in instruction that I copy quicly bay copy/paste.
    It is :
    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’,

    instead of :
    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’,

    (you noticed ‘&’ instead of ‘&’)

    The same find of errors, for instance :
    if ( !$sErrorNumber && IsAllowedExt( $sExtension, $resourceType ) )
    instead of :
    if ( !$sErrorNumber && IsAllowedExt( $sExtension, $resourceType ) )
    was detected by PHP interpreter and so immediatly corrected, but for the first one
    It takes me about one week. I was not aware of that error in spite of searching the string ‘&’ in all the files in the filemanager repertory because the instanciation of
    one instance of the editor (where is defined the -wrong- value of filebrowserImageBrowseUrl) whas in a file which is not in the ‘ckeditor’ directory.

    So it will be fined for next readers of your page if you could take away these errors.

    Thanks a lot.

    Roger

  • http://www.snl-essonne.org Roger Astier

    On my post there is the errors i mentionned was hidden because there is no difference between : ‘& a m p ;’ and ‘&’
    I wrote the first without the spaces and it was converted in the second.
    All the errors in the instructions you mentionned is the presence of ‘& a m p ;’

  • http://www.codetoon.com Penuel

    Roger thanks for bringing it to notice. This has happened second time, as my WYSWYIG automatically changes the code and I am not sure how the article got updated has I didn’t touch it for a long time, except while migrating to new server.

    I have corrected the problems, and you can always download the working example here.

  • Rick Wagner

    I would like to know how to increase the vertical area of the editor. I need to know where this setting is located.

    Thanks,
    Rick

  • http://www.codetoon.com Penuel

    Rick, did you try in the CKeditor initialization code? something like this

    CKEDITOR.replace( ‘editor1′,
    {
    height:’900px’
    }

    try adding the height config option in the intialzation code.

  • Rick Wagner

    Thanks!! That solved my problem!!

  • Alex

    Hi,
    I”m using asp.net, and I have the ckeditor inside a user control, Could you please explain me, show an example, where should I put “CKEDITOR.replace( ‘editor1′,” code?
    Thanks

  • http://www.codetoon.com Penuel

    @Alex, I am not an ASP.net expert and it has been ages I have looked into it, but I think it should go into your view/html code, where you have your text area defined, since everything here is replaced by javascript on client side/browser, and there is no server logic while initializing. Please make sure you have correct reference to CKeditor js in your script tags and correct id given to textarea and initialization code.

  • Valr

    Many thanks. This worked perfectly for me. The only problem is that it doesn’t work with Firefox 4. You can upload an image with no problem but when you click to use the image it doesn’t show up in the preview window nor does it show in the editor.
    I suspect this is related to Firefox 4 no longer showing the link url in the location bar. I did try using the S4E addon to put the link back but that didn’t solve the problem.

  • http://www.codetoon.com Penuel

    Valr, Is it working correctly on versions below FF4 ? Also there is a known issue that if the file name has a space it won’t be displayed in the preview window. (see: http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/comment-page-3/#comment-2627)

    I still need to fix that bug, @Len has proposed a fix at: http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/comment-page-3/#comment-2637

    Possibly that could be the problem?

  • Valr

    Yes, it works perfectly in Firefox 3.x, Opera and IE. It is just Firefox 4 where I have a problem.

  • Valr

    Thank you for your attention on this and again thanks for a great tutorial.
    There are no IIS issues as my site is hosted on a shared Linux server. The image names contain no unusual characters and there is no red X displayed in the preview pane. When I click a link in the filefinder window it simply does nothing. I can get it to work by directly typing in the URL of the image but that won’t be an ideal solution for many of my users.

  • Sanjay Chauhan

    Thanks a lot, you saved my lots of time :)

  • Walfare

    First of all, thanks for the tutorial. Everything works fine, but I would like to know if its possible to delete the uploaded files via the filemanager.

  • http://www.codetoon.com Penuel

    @Walfare, this tutorial just ports the FCKEditor’s default Filemanager to CKEditor so there is no delete mechanism built in it, however you can always add that functionaily by making few patches to it as I have seen this in past.

  • Krastley

    Thank you for this great tutorial, it saved me a lot of time! But I have one more question:) How can I set paths for browser and uploader? It creates folder ‘userfiles’ in server root and this is not what I need. I’m not familiar with javascript :( Thanks a lot!

  • http://www.codetoon.com Penuel

    Krastley, you set the path for user files in filemanager/connectors/php/config.php and modifying the “UserFilesPath” variable.

  • Krastley

    Thank you.

  • David

    Hello.
    I seem to be having and similar problem as Mike (posted earlier) did in which I get an alert: The server didn’t reply with a proper XML data. Please check your configuration.

    I checked the prefix as you suggested to him but I’m still getting the same message. I apologize as I’m not a programmer, so most js is greek to me. Is there a specific configuration that I could have missed that would cause this?

    Thank you in advance for your help.

  • http://www.flynewmedia.com Valiik

    Thans so much for this tutorial and especially for the example files!!

    Got it all to work but can not figure out how to make this work for multiple editors on a page…

    current code (inside the demo.html):

    CKEDITOR.replace( ‘editor1ID’, ……..

    I need something that can use a class rather than an ID.

    CKEDITOR.replace( ‘ckeditorClass’, ……..

    So this would add an uploader to every instance of the textarea on the page. Would appreciate any help on this.

  • http://www.codetoon.com Penuel

    Vallik, did some research and found this useful. You can simiply call the replaceAll(‘className’) method:

    // Replace all elements in the page.
    CKEDITOR.replaceAll( ‘myClassName’ );

    More info on below link:
    http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.replaceAll

  • http://www.codetoon.com Penuel

    David, did you set the path for user files in filemanager/connectors/php/config.php and modified the “UserFilesPath” variable? Also make sure the directory is writable..

  • Izzet

    Hi Penuel,
    Thanks for these great codes!!!

    How we can set the thumbnail view for upload window, delete button for uplaoded files?

    Thanks…

  • http://www.codetoon.com Penuel

    There is no such support but can be added without much difficulty by changing few files. I am planning to add it when time permits.

  • Carlos

    Hi Penuel,

    your tutorial is great and the solution works fine! Thanx very much, helped me a lot :)

  • Hatem

    Hi,

    Thanks for this tutorial. I tried it, the Explore button appears, when I clicked, it opens the browser popup, but it displays my website homepage instead of the file browser.

    Any idea why this is happening ?

  • http://www.codetoon.com Penuel

    Make sure the filebrowser urls are set correct in the initialization code.