Integrating FCKEditor FileManager in CKEditor

228 Responses to Integrating FCKEditor FileManager in CKEditor

1. Hatem says:

   June 14, 2011 at 5:41 pm

   it works thanks
2. afaddul says:

   June 17, 2011 at 12:40 pm

   could u please post it for aspx language?? i will be very thankh ful to u
3. chbhbds says:

   June 17, 2011 at 12:41 pm

   Please put it for aspx language also
   i’ll be very tahnkful to u
4. Angela Yamat says:

   June 17, 2011 at 1:50 pm

   Great! Thanks for the post.
5. Angela Yamat says:

   June 17, 2011 at 1:58 pm

   Just one thing, the preview doesn’t work when I browse an image with space in the filename.
6. Angela Yamat says:

   June 17, 2011 at 2:21 pm

   Oh, preview is now working properly, I just update the file ‘frmresourceslist/html’ at line110 with this one;

   window.top.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );

   Basically, I just load the fileUrl directly without encoding it. Will that be an issue?
7. Penuel says:

   June 18, 2011 at 11:07 am

   Unfortunately I am not an aspx guy so I can’t do it right now, however the main purpose for writing the tutorial was that anyone can port it to any language if the understand the tutorial.
8. Penuel says:

   June 18, 2011 at 11:54 am

   Hi Angela, this is a known issue reported by Len http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/comment-page-3/#comment-2627

   I need to fix that. I am not sure if removing encoding works well, but you need to test it rigorously with different file names.
9. Penuel says:

   June 25, 2011 at 6:44 pm

   To all readers I have recently updated the file manager code which fixes a bug related to file names with spaces. Earlier the filenames with spaces were not visible in the preview window, but displayed correctly in editor window. This was due do incorrect encoding of fileUrl which was already encoded creating invalid filenames. The problem is fixed now and should work well with filenames having spaces. Thanks to Angela Yamat who implemented similar fix and bringing this to notice. Thanks to Len for reporting this problem earlier.

   Please post if you find any such bugs (and possible solutions) so that we can make a better code.
10. Rick Wagner says:

    July 8, 2011 at 6:53 am

    Hi,
    I was wondering if there is a way to have separate folders (based on my client) to use for uploads of images.
    Thanks, Rick
11. Penuel says:

    July 8, 2011 at 10:28 am

    Hi Rick,

    It is possible to have separate folders for eg. separate folder structure for each user instead of common one. Although it requires some extra bit of coding. The hack is to dynamically generate the userfiles path which we otherwise hardcode in the config.php

    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/’ ;

    Where XXXX can be a value from user’s Session variable like user id etc.

    Since its all server side code you can easily access the already existing session created by your main app.
12. 100d says:

    July 17, 2011 at 8:00 pm

    hi Penuel, I am new to CKeditor and I had never used FCKeditor, so this tutorial is a great help to you, thank you. In terms of your /userfiles/XXXX/ suggestion above, it’s understandable but my member site is a little different and I want to see if you are able to suggest something for my scenario.

    For example, if all users upload files to the same folders such as image to imageFile folder, pdf to pdfFile folder, words file to wordFile folder, how would this be done?
    /whatever/imageFile/
    –userAimagefile.jpg
    –userBimagefile.jpg
    –userCimagefile.jpg

    /whatever/pdfFile/
    –userApdffile.jpg
    –userBpdffile.jpg
    –userCpdffile.jpg

    /whatever/wordFile/
    –userAwordfile.jpg
    –userBwordfile.jpg
    –userCwordfile.jpg

    Thanks in advance.
13. Penuel says:

    July 18, 2011 at 10:36 am

    @100D it would require you to edit/hack multiple files and can be bit complex for some one new to this. The exact steps would be difficult to explain here, but a similar function is available already in FCKeditor where Fckeditor categorizes files in different folders based on their type. For eg. image files in image folder, flash files in flash folder, video files like avi etc to media folder, other formats like txt, word to Files folder. you can switch between folders by selecting the resource type drop down in left sidebar of the file browser. not all resource types are available in the filebrowser everytime, but when you try to edit a ‘link’ you can see all the resource types and switch between them. Looking at this, you have the possibility of extending the current functionality to what you require with some reverse engineering and hacking.
14. 100d says:

    July 18, 2011 at 10:51 am

    Thanks for that, I will look into this once I get the part you explained working.

    I have gotten most working except for when I try to select a file from the browser, it doesn’t do anything. Firebug detected that as an error and the error is “Permission denied to access property ‘CKEDITOR’”. When I digged in and it appears that the OpenFile function in frmresourceslist.html file, where the line says window.top.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl); is the problem, do you know or has anyone gotten the same issue previously?

    I am thinking it has something to do with my userpath but then if I was able to upload file and browse, it shouldn’t be a problem?

    Once I figure this part out, I am good to move on and expose deeper.

    thanks for this hack by the way.
15. Penuel says:

    July 18, 2011 at 10:59 am

    I believe its problem similar to http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/comment-page-3/#comment-2638, you may try to fix it by what i said below it; could be due to different domains (even urls with or without www) and Javascript is denying the access to objects in other domain.
16. 100d says:

    July 20, 2011 at 5:46 am

    Thanks Penuel. I fixed the problem. The problem was caused simply due to domain issue. I had the files in the main domain where trying to access these files from the subdomain. Symbolic link fixed it. Now I am moving on to see the user access issue I am having.
17. Rick Wagner says:

    July 28, 2011 at 6:03 am

    Hi Penuel,
    I hope today finds you well!
    I have a question regarding ckfinder settings for image folders. I have gotten the sub directories working: “\images\40″ “\images\50″ for example. In the finder I need to pass the js the customer id (40, 50) as example so that the client only can access their image folder. I think this could be done but I don’t know where the js for the finder resides. Hoping that you can help!
    Thanks, Rick…
18. Rick Wagner says:

    July 28, 2011 at 6:05 am

    Hi Penuel,
    I hope today finds you well!
    I have a question regarding ckfinder settings for image folders. I have gotten the sub directories working: \images\40 \images\50 for example. In the finder I need to pass the js the customer id (40, 50) as example so that the client only can access their image folder. I think this could be done but I don’t know where the js for the finder resides. Hoping that you can help!
    Thanks, Rick…
19. rizvan bhimani says:

    August 5, 2011 at 2:47 pm

    Great! Thanks for the post. Thanks penuel
    It is very helpful to me…
20. faiza says:

    August 6, 2011 at 10:34 pm

    Great Tutorial it worked perfectly at my localhost but when i move it to my production are then it start giving me the error “he server didnot reply with proper xml data please check ur configurations”

    Any help would be appreciated
21. Penuel says:

    August 7, 2011 at 10:39 pm

    Its generally related to urls you set in CKEditor initialization code (i have hard coded it on above code). Make sure your urls are correct. Also please make sure the userfilepath in config.php has correct value.
22. Avi says:

    August 8, 2011 at 12:08 pm

    Hi Penuel,

    Great tutorial.
    Only got one question. Can please explain what changes are to be made in the ‘config.php’ file.. I’m not familiar with php and were in a lost there (is it possible to make those changes in the ‘config.aspx’??)

    many thanks,
    Avi
23. Penuel says:

    August 8, 2011 at 12:11 pm

    Config.php is only about updating the userfilepath variable to a directory location where files get uploaded. Its pretty easy for anyone to understand so feel free to open and look at it.
24. Avi says:

    August 8, 2011 at 12:36 pm

    Thanks for the quick reply, but I did everything (I’ve checked several times) and when I hit ‘Browse Server’, the file manager window gets open, but I get error message saying that the server didn’t reply with a proper xml data.. and when I try uploading a file, it’s just dosen’t work..
    Any thoughts?
25. Penuel says:

    August 8, 2011 at 12:42 pm

    Please make sure you don’t have a cross domain. A problem can arise when there are two different urls loaded in the main window and the file browser window. For eg. the main window where you see the editor has http://yourdomain.com and the browser popup has same url but with extra www (www.yourdomain.com). This is cross domain and it will throw an error. Please check if that has been an issue, this has been faced by mean readers.
26. Avi says:

    August 8, 2011 at 12:50 pm

    I’m running the site in localhost, can it be the it changes the url?
    How can I solve it?
    Plus, I thought it was a permission issue, but I’ve checked and I’ve got full control with the library.
27. Till says:

    August 10, 2011 at 2:17 am

    Hi Penuel!

    thanks for sharing your work.
    Please help with the following:

    (i changed $Config['UserFilesPath'] = ‘../../../userfiles/’ ; in config.php)

    browsing the server and uploading works correctly.
    when it comes to insert the image, the wrong url is displayed.
    when removing ‘../../../’ its ok.

    wrong
    right

    can this be corrected in : frmresourceslist.html ?

    thanks for helping.

    Till.
28. idan says:

    August 12, 2011 at 4:01 am

    hi theks allot for coding
    i did everthing as told but when i open the “Browse Server” i get this error what is it?

    Error creating folder “/var/www/vhosts/MYWEBSITE.COM/httpdocs” (mkdir() [function.mkdir]: SAFE MODE Restriction in effect. The script whose uid is 10057 is not allowed to access /var owned by uid 0)

    this is the first time i get this caind of error.
    pls help me?!
29. Penuel says:

    August 12, 2011 at 7:50 am

    Idan its due to safemode on on your server http://php.net/manual/en/features.safe-mode.php
30. Penuel says:

    August 12, 2011 at 7:55 am

    @Till, I haven’t tried that but I would suggest can’t we have a path from the root of the server? Alternative the config.php has a another variable for absolute path $Config['UserFilesAbsolutePath'] you may also try that.
31. Justin says:

    August 13, 2011 at 10:13 am

    Hi Penuel,
    Thank you SO much for this solution!! I tried 2 other free solutions that failed, and finding this was just awesome! What a great idea to just grab the free solution that was already in the old fckeditor and use it for the new one! Again, MANY thanks!!

    One thing I noticed with the code is that when you upload a file through the ‘Upload’ tab that appears on the main file insert window (not the ‘Upload’ form that appears when you click ‘Browse Server’, but the link that displays along the top when you first click the ‘Insert Image’ or ‘Flash’ button on the WYSIWYG editor) does not upload the file to the correct directory. For example, if I click the ‘Image’ button, and then click the ‘Upload’ tab at the top, I want the file to upload to my ‘/userfiles/image/’ directory, but instead it uploads to just the ‘/userfiles/’ directory.

    The problem lies in this file: filemanager/connectors/php/upload.php at around line 43-46, where it says:
    // The file type (from the QueryString, by default ‘File’).
    $sType = isset( $_GET['Type'] ) ? $_GET['Type'] : ‘File’ ;
    $sCurrentFolder = “/” ;

    That $sCurrentFolder directory shouldn’t always get set to “/”, but should get set appropriately based on the file type. Since there are only 2 options (Image or Flash), and the directories that get auto-created in your ‘userfiles’ directory are ‘image’ and ‘flash’, I hard-coded some “if” statements to fix this. Replace the above code with:
    // The file type (from the QueryString, by default ‘File’).
    //$sType = isset( $_GET['Type'] ) ? $_GET['Type'] : ‘File’ ;
    //$sCurrentFolder = “/” ;
    // EDIT: regardless of the file type, the current folder would default to the root directory.
    // to fix, we’ll add an if statement to check for the file type. if one is found, it
    // will either be ‘image’ or ‘flash’ since those are the only 2 options, so we’ll set
    // the current folder to one of those explicitly.
    if (isset($_GET['Type'])) {
    $sType = $_GET['Type'];
    if ($_GET['Type'] == ‘Image’) {
    $sCurrentFolder = “image/”;
    } else {
    $sCurrentFolder = “flash/”;
    }
    } else {
    $sType = ‘File’;
    $sCurrentFolder = “/”;
    }

    Now that ‘Upload’ tab works like it should, along with the ‘Upload’ form when you click ‘Browse Server’.
32. Penuel says:

    August 13, 2011 at 11:32 am

    Hi Justin, Thanks for your feedback and reporting a possible problem. However I tested it on my local machine and it works as expected without the changes you told. The files are uploaded to correct directories when you using the Upload tab. Also the demo link http://www.mixedwaves.com/filemanager_in_ckeditor/demo.html works correct and none of the files got uploaded to userfiles/ dir. Can you please check if you have correctly followed the solution especially the section that describes how to enable the quick upload tab? You can also download the demo from http://www.mixedwaves.com/filemanager_in_ckeditor.zip and check if that works correctly?
33. Brouhon says:

    August 15, 2011 at 6:17 pm

    It works like a charm
    Great Work
    thx

    c ya´s
34. dave says:

    August 17, 2011 at 2:15 am

    Thankyou so much for this….. Have used FCK/CK for ages, and since using CK have either done without an uploader or used some hacky free ones I always had to recode to get working.

    Spent most of yesterday and todays spare time looking for a different editor that had good WYSIWYG and HTML and upload etc for a decent licence price and found nothing

    I was really in a state of dispair until I saw this post….. cracked out a couple of old builds, copied the files over, made your amends and all sweet as a nut – thanks sooooooo much.

    I’m a .net mvc/aspx guy, so if I get the time, I will try to write a couple of lines to help those out too.
35. Penuel says:

    August 17, 2011 at 8:47 am

    Dave glad it had been useful to you and you are most welcome to write some code in aspx to help those people out too. It would be a great help for them too, I get many questions about aspx but I am unable to do that due to my lack of knowledge in aspx.
36. Rick Wagner says:

    August 17, 2011 at 8:37 pm

    I have a question regarding ckfinder settings for image folders. I have gotten the sub directories working: “\images\40″ “\images\50″ for example. In the finder I need to pass the js the customer id (40, 50) as example so that the client only can access their image folder. I think this could be done but I don’t know where the js for the finder resides. Hoping that you can help!
37. Penuel says:

    August 17, 2011 at 10:34 pm

    Rick I can’t explain it here fully, but can give you a pointer for places to explore. Most probably you will need to modify the function GetFolderRowHtml inside browser/default/frmresourceslist.html. This function creates the folder and file name links that you see on the in the browser window. Also function GetFoldersAndFiles inside connectors/php/commands.php. This function outputs the folders & files names in xml format that is parsed by javascript to display to display as file & folder list. Probably you can modify this xml to include your customers id. Use firebug to explore the ajax call that is made when browser window loads and you can get some direction from there.
38. Bruno H says:

    August 31, 2011 at 9:18 am

    Great work man
    really helpful

    thx a lot
39. Santiago Lombardi says:

    September 6, 2011 at 1:49 am

    Hi Penuel,
    I have done some changes to implement image previews on selected folder. I changed the table for some divs.
    To implement that I changed the following files:
    
filemanager/browser/default/frmresourceslist.html
filemanager/browser/default/browser.css

    I am pasting 3 complete js functions and the necessary css class here:

    in filemanager/browser/default/frmresourceslist.html :
    
oListManager.GetFolderRowHtml = function( folderName, folderPath )
{
// Build the link to view the folder.
var sLink = '' ;

    return '' +
    '' +
    sLink +
    '' +
    ' ' +
    sLink +
    folderName +
    '' +
    '' ;
    }

    oListManager.GetFileRowHtml = function( fileName, fileUrl, fileSize )
    {
    // Build the link to view the folder.
    var sLink = '' ;

    // Get the file icon.
    var sIcon = oIcons.GetIcon( fileName ) ;

    if (fileName.length >= 15){
    var fileNameExt = fileName.split('.').pop();
    fileName = fileName.substring(0,8) + "(...)." + fileNameExt;
    }

    return '' +
    '' +
    sLink +
    '' +
    ' ' +
    sLink +
    fileName +
    '' +
    fileSize +
    ' KB' +
    '' ;
    }

    function GetFoldersAndFilesCallBack( fckXml )
    {
    if ( oConnector.CheckError( fckXml ) != 0 )
    return ;

    // Get the current folder path.
    var oFolderNode = fckXml.SelectSingleNode( 'Connector/CurrentFolder' ) ;
    if ( oFolderNode == null )
    {
    alert( 'The server didn\'t reply with a proper XML data. Please check your configuration.' ) ;
    return ;
    }
    var sCurrentFolderPath = oFolderNode.attributes.getNamedItem('path').value ;
    var sCurrentFolderUrl = oFolderNode.attributes.getNamedItem('url').value ;

    // var dTimer = new Date() ;

    var oHtml = new StringBuilder( '' ) ;

    // Add the Folders.
    var oNodes ;
    oNodes = fckXml.SelectNodes( 'Connector/Folders/Folder' ) ;
    for ( var i = 0 ; i < oNodes.length ; i++ )
    {
    var sFolderName = oNodes[i].attributes.getNamedItem('name').value ;
    oHtml.Append( oListManager.GetFolderRowHtml( sFolderName, sCurrentFolderPath + sFolderName + "/" ) ) ;
    }

    // Add the Files.
    oNodes = fckXml.SelectNodes( 'Connector/Files/File' ) ;
    for ( var j = 0 ; j < oNodes.length ; j++ )
    {
    var oNode = oNodes[j] ;
    var sFileName = oNode.attributes.getNamedItem('name').value ;
    var sFileSize = oNode.attributes.getNamedItem('size').value ;

    // Get the optional "url" attribute. If not available, build the url.
    var oFileUrlAtt = oNodes[j].attributes.getNamedItem('url') ;
    var sFileUrl = oFileUrlAtt != null ? oFileUrlAtt.value : encodeURI( sCurrentFolderUrl + sFileName ).replace( /#/g, '%23' ) ;

    oHtml.Append( oListManager.GetFileRowHtml( sFileName, sFileUrl, sFileSize ) ) ;
    }

    oHtml.Append( '' ) ;

    document.body.innerHTML = oHtml.ToString() ;

    // window.top.document.title = 'Finished processing in ' + ( ( ( new Date() ) - dTimer ) / 1000 ) + ' seconds' ;

    }


    in filemanager/browser/default/browser.css :

    
.filesContainer {
float:none;
width:500px;
padding:10px;
}
.filesItem {
background: #CCCCCC;
float:left;
width: 100px;
height: 130px;
text-align:center;
padding:5px;
margin: 20px;

    }

    .filesFoto {
    float:none;
    width: 80px;
    height: 80px;
    margin: 10px;
    }

    .filesNombre{
float:none;
margin: 10px;
width: 80px;
}


    If you wish, I could send you a zipped file.

    Thanks for your job.

    Santiago
40. Matthaios says:

    September 11, 2011 at 6:43 pm

    Great tutorial. Made my life easier. I only have a slight problem with browse server function. It always creates “image” folder within user folder specified in confiruration.php. Is ther a way to set it to display content of user folder instead of creating new folder within?
41. Penuel says:

    September 11, 2011 at 10:22 pm

    There is no direct way of doing except if you hack into the code further.

42. Pingback: Enabling File Uploader with CKEditor | imdavidr blog

43. Sandi says:

    October 5, 2011 at 12:21 pm

    Hello!

    Where can i put the code below for general use of all instances for editors (I want to make this so I don’t have to determin the path to each intance of editor separately.)

    I use jquery adapter for calling instance of editor, using this code: $(‘#Content’).ckeditor();

    The code:
    CKEDITOR.replace( ‘editor1′,
    {
    filebrowserBrowseUrl :’js/ckeditor/filemanager/browser/default/browser.html?Connector=http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php’,
    filebrowserImageBrowseUrl : ‘js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php’,
    filebrowserFlashBrowseUrl :’js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=http://www.mixedwaves.com/filemanager_in_ckeditor/js/ckeditor/filemanager/connectors/php/connector.php’,
    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’

    });
44. Penuel says:

    October 5, 2011 at 2:40 pm

    You may use CKEditor.replaceALL() API
45. Penuel says:

    October 5, 2011 at 2:41 pm

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

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

    October 8, 2011 at 5:18 pm

    Hello, great code. I would like to know where should I put code to resize images when they are uploaded. I looked into your code and think I should put it in upload.php file after line 229
    move_uploaded_file( $oFile['tmp_name'], $sFilePath ) ;

    So I think after moving file I would resize it. For resizing I would use GD image library.
    Do you think this would work ok?
47. Simon says:

    October 8, 2011 at 5:52 pm

    Hi, one more thing. When i put image in editor it show ok and kode is gut. But when I get posted data all my quotes are escaped so image doesn’t show. For example in posted data I get :

    How can I fix this?
48. Simon says:

    October 8, 2011 at 6:06 pm

    I solved problem with slashes I used function stripslashes($var) on my string and is now working ok.
49. Mark says:

    October 18, 2011 at 3:36 pm

    Brilliant work!
50. Mark says:

    October 18, 2011 at 3:50 pm

    Brilliant work!

    The only problem I had was with the last bit script:
    
// 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">';


Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

CAPTCHA Code*

Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">