My TinyMCE File Management : Part 2 : TinyFCK with delete option

TinyMCE LogoSo I wrote about managing files with TinyMCE, but didn’t quite actually post any code (only did a functional analysis and provided a workflow). In this follow up I’ll be handling on how to add a file delete option to TinyFCK, along with the code needed for it, in a nice step by step tutorial/howto/whatever you’d like to call it. The code for the WordPress alike system is planned somewhere in the future.

Prerequisites

  • Grab yourself the latest copy of TinyFCK (current release while writing is 0.13, holding TinyMCE 2.0.6.1 and FCKEditor 2.2’s file manager)
  • Implement TinyFCK and make sure that it works.
  • Create a 16 by 16 image you want to use as a delete button. (If you are too lame to create an image, just google for one)

Having all these in place, we can finally start off hacking TinyFCK so that it will support file deletion

The main action

  1. Place the delete image into filemanager/images/
  2. Open up filemanager/frmresourceslist.html for editing with your favorite text-editor
    • Create a Delete Link which will call the DeleteFile function (which we’ll create later)
    • Add the created Delete Link to the page
    • Add a DeleteFile function (which will call the PHP script) and a DeleteFileCallBack function (which is called after the file was deleted) just before window.onload = { … }
      • The DeleteFile function:
        [js]// Added by Bramus!
        function DeleteFile( fileName, fileUrl ) {
        if (confirm(‘Are you sure you wish to delete ‘ + unescape(fileName) + ‘?’)) {
        oConnector.SendCommand( ‘DeleteFile’, “FileName=” + fileName, DeleteFileCallBack ) ;
        }
        }[/js]
      • The DeleteFileCallBack function
        [js]// Added by Bramus!
        function DeleteFileCallBack ( fckXml ) {
        var oNodes = fckXml.SelectNodes( ‘Connector/Error’ );
        if (oNodes!=null && oNodes.length>0) {
        var errNo = parseInt(oNodes[0].attributes.getNamedItem(‘number’).value) ;

        switch (errNo) {
        case 0 :
        break;

        case 102 :
        case 103 :
        alert(oNodes[0].attributes.getNamedItem(‘originalDescription’).value);
        break;

        default:
        alert(‘DFi: Invalid XML response from connector..’);
        }

        } else {
        alert(‘DFi: Invalid XML response from connector.’);
        }
        Refresh();
        }[/js]

  3. Open up filemanager/connectors/php/commands.php for editing at the very end of the file (just before the ?>)
    • Add a DeleteFile function which actually deletes the file
      [php]// Added by Bramus!
      function DeleteFile($resourceType, $currentFolder) {
      $sErrorNumber = ‘0’ ;
      $sErrorMsg = ” ;

      if ( isset( $_GET[‘FileName’] ) ) {

      // Map the virtual path to the local server path.
      $sServerDir = ServerMapFolder( $resourceType, $currentFolder ) ;

      $sFileName = $_GET[‘FileName’] ;

      if ( strpos( $sFileName, ‘..’ ) !== FALSE ) {
      $sErrorNumber = ‘102’ ; // Invalid file name.
      $sErrorMsg = ‘Invalid file name’;
      } else {
      if ( @unlink($sServerDir.$sFileName) ) {
      $sErrorNumber = ‘0’ ; // deleted
      } else {
      $sErrorNumber = ‘103’ ; // not deleted
      $sErrorMsg = ‘Could not delete file ‘.$sServerDir.$sFileName;
      }
      }
      } else {
      $sErrorNumber = ‘102’ ; // no file set
      $sErrorMsg = ‘No file specified’;
      }

      // Create the “Error” node.
      echo ‘‘ ;
      }[/php]

  4. Open up filemanager/connectors/php/connector.php for editing
    • Modify the switch statement to include the DeleteFile action
      Go to line 100 where you’ll find “break ;”, after that add:
      [php]case ‘DeleteFile’ : // Added by Bramus!
      DeleteFile( $sResourceType, $sCurrentFolder ) ;
      break ;[/php]

Happy copy and pasting!

If all goes well, you should get something like this:

tinycme_content_tinyfck_like.jpg

Bramus.out!

Another Dailie, TinyMCE, Webdevelopment

40 Responses to My TinyMCE File Management : Part 2 : TinyFCK with delete option

  1. sylter says:

    i thought long about leaving just a senseless comment here because this sounds all very barcelona to me, but i guess your serious about it. so what shall i do now? ….

  2. Bramus! says:

    Crud, should’ve placed a big GEEK ALERT! warning at the very start of this post 😀

  3. mininovax says:

    Interesting code indeed. Sort of weird that “FCKEditor” would not implement this in their connectors.

    I worked on it for a couple of hours, and was unable to get the connector to plug correctly. It only would refresh the contents of the directory when creating a sub directory.

    Anyways, like the page, and the code. I would suggest you “link” this article to the First Part … just my 2 cents

  4. Bramus! says:

    Hi mininovax, the first link in the post in fact is a link to the first part 😉

    What part of the code exactly fails for you? Maybe I ought to offer the final version for download…

    B!

  5. coder says:

    Cool code. Thanks muchly!!!

    One small addition: Modify line 74 to set the width of the icon cell to cater for the new image. I used 35 to cater for an additional 16 pixel wide image.

    Works a treat.

  6. Flummi says:

    Thanx very much for this code. I was searching nearly 3 hours for a delete function for fckeditor and finaly found your page. It war realy easy with your help to hack in the delete function. Thanx again!

  7. Pingback: Bram.us » My TinyMCE File Management : Spinoff 1 : PHP file uploads

  8. Pingback: 1983 » Wordpress, IIS and a crapload of hacking.

  9. Well done. I’ve been looking for a simple image upload function that works with tinyMCE so I can quickly roll simple WYSIWYG forms in my apps.

    Other suggestions — users may want to change the title of filemanager/browser.html to “Image Browser” rather than “FCKEditor Resource Browser”. I also got rid of the dropdown arrow image in filemanager/actualfolder.html since it didn’t do anything, and tweaked frmresourcetype.html by giving the select a display:none style & changing the text from “Resource Type” to “Folders”

  10. Shanto says:

    Thank you very very much. I searching like this from many days. You are Rock.

  11. Isaac says:

    hi, is there anyway to implement this for folder + folder with reclusive level too?

  12. Bramus! says:

    Hi Isaac, although the code for it isn’t there, it surely would be possible to implement this with a likewise code. Instead of PHP’s unlink function, the rmdir function would be needed to get called.

    Be sure to read the rmdir function comments too, as a directory should be empty (tip: there are plenty of recursive dir deletion functions available, just google “php delete directory recursively” or something like that).

  13. Pingback: 嘿嘿 转贴一篇 希望自己能写几篇这个级别的log « 正文Pepsi

  14. Andrew says:

    Thank you very much! You saved me plenty of time trying to do it on my own.

  15. Bramus! says:

    @ Andrew: glad I could help 😉

  16. Hey Bramus 😀

    Thanks for the ‘delete option’ using it on my last few projects.
    Great work!

    David Giorgi
    chiefDreamer

  17. nelo says:

    Great code, easy to add, very useful. I used with FCKeditor 2.3.1 and you just have to move 3 lines down the part that load the delete.gif

    + dLink + ‘

    it has to be add after tag after “fileName +” if not you will not see the file name. Just this, but you did a great work, thanks again.

  18. Ted Tyree says:

    Bramus! You rock! Your solution is phenominal and simple.

    I just created the same solution for FCKEditor .NET!!! It was easy after reading your information listed above.

    If anyone wants a copy of the steps I used to implement the DELETE feature in FCKEditor .NET, just visit…

    http://www.orgsauce.org/rscPages/vWiki.aspx?world=orgsauce&wiki=webpagesIT&page=FCKEditor-Delete

    Again – THANK YOU BRAMUS!

  19. Rick says:

    nice one bramus, worked like a charm!

  20. Richard says:

    Hi, is there anyone who has a coldfusion function for this? Thanks all.

  21. cristina says:

    Hello!
    2 comments:
    – first: the link to TinyFCK on top of this post is not working

    – second: your code is great but probably due to my lack of experience I get the following error when trying to delete a uploaded file:
    DFi: Invalid XML response from connector..

    And I can’t find out what the problem is!
    Can you help???

    Thank you.

  22. Oleg says:

    To cristina and other
    If you see error ‘DFi: Invalid XML response from connector..’,
    open ‘config.php’ and add
    $Config[‘ConfigAllowedCommands’] = array(…, ‘DeleteFile’) ;

  23. Hi Bramus!

    Thanks a lot for this hack. Exactly what I need to fix the FCKeditor plugin for WordPress. Though, I am using version 2.3.1 and it seems the code-structure has changed. I can not recognize where I need to replace something. The code looks different now. Could you perhaps explain again where the code needs to be replaced in 2.3.1? Thank you!

  24. Andrew says:

    Ho-ho-ho, finally there is plenty of fish! Thanks a lot, its a piece of code that i looking for last couple of month’s

  25. Fábio N Sarmento says:

    cheeerrrssss!! you rock brahmus, i was looking for hours to how to solve that shit! nice trick ! []’s

  26. Brett Smith says:

    do you have the code to delete folders as well? Great work otherwise

  27. sadohov says:

    Thank you very much!

  28. Usiel says:

    I loved your hack code. Its wonderfull and very nice. Thank’s, so much.

  29. Jason Toh says:

    hi Bramus, nice code!!

    i tried to get it working only to find out it works only in the BrowseServer window which I have mine disabled. Can I ask for advice on how to adapt your code so that – a file is deleted whenever the user presses the “Delete” button on the keyboard. I know it will delete the tag but how do I make it delete the image as well?

    Thanks & Cheers!

  30. Gladwin says:

    hi Bramus, nice code!!

    can yu plz write a function to delete folders as well ?

  31. Nick says:

    Regarding this error:

    DFi: Invalid XML response from connector..

    Bramus and Oleg, thanks very much

    Legends.

  32. Frank says:

    This looks great. Just having some teething problems getting it to work with FCKeditor 2.6.4. I was getting the “DFi: Invalid XML response from connector..” error, so followed Oleg’s instructions above.

    Now when I open the image browser I get an alert saying “The “GetFoldersAndFiles” command isn’t allowed” and none of the files are displayed. Any idea how to get round this?

    Thanks!

  33. Frank says:

    Ah – I’m an idiot. I was adding “$Config[‘ConfigAllowedCommands’] = array(…, ‘DeleteFile’) ;” to the end of config.php. In fact, you’re just meant to add “, ‘DeleteFile’” to that line which already exists!

    All works great now.

  34. Mitch says:

    Simply brilliant! I had been looking for a solution like this for quite a while and luckily stumbled on your site. Thanks for sharing…it is greatly appreciated! I added your mods to a different version of FCKEditor, but it was still easy to modify to my needs based on your instructions. Thanks again!

  35. Roman says:

    It is very pity that there is no removal of directories.: (

  36. April Silver says:

    Thank you so much for this code. Well-explained and it works! Oleg’s hint to add ‘DeleteFile’ to the ‘ConfigAllowedCommands’ array was crucial, too. Thanks again!

  37. Pingback: FCKeditor: Filemanager improvement | A Bold New Look

  38. Rude says:

    Great, man.

    Still works in FCKeditor 2.6.5. Code has changed somewhat, but anybody with a little knowledge in PHP/HTML/JS can easily follow your steps in a couple of minutes.

  39. Gavin says:

    Has anybody got this working on FCKEditor 2.6.2 ?

    I have followed all instructions AND the extra instructions from Oleg but still getting the error

    DFi: Invalid XML response from connector..

    🙁

  40. Andrejs says:

    If still someone gets “DFi: Invalid XML response from connector.” (one period at the end) and previous instructions didn’t help, try to modify frmresourceslist.html. Replace the line that contains the following code (in the DeleteFileCallBack function):
    var oNodes = fckXml.SelectNodes( ‘Connector/Error’ );
    to
    var oNodes = fckXml.SelectNodes( ‘Connector/error’ );

    Notice that the only change is lowercased “error”. I’ve examined connector’s XML source and it appears, that tag is lowercased. This solved my problem.

Leave a Reply

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