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!

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

40 Comments

  1. 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. 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

  3. 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!

  4. 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.

  5. 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!

  6. 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”

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

  8. 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).

  9. 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.

  10. 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.

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

  12. 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!

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

  14. 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!

  15. Regarding this error:

    DFi: Invalid XML response from connector..

    Bramus and Oleg, thanks very much

    Legends.

  16. 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!

  17. 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.

  18. 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!

  19. 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.

  20. 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..

    🙁

  21. 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 comment

Leave a Reply to Roman Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.