« | Home | »

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)
      • Go to line #66 where you'll find this:
        PLAIN TEXT
        JavaScript:
        1. var sLink = '<a href="#" onclick="OpenFile(\'' + fileUrl + '\');return false;">' ;
      • Underneath that line, now insert this:
        PLAIN TEXT
        JavaScript:
        1. var dLink = '<a href="#" title="Delete file" onclick="DeleteFile(\'' + escape(fileName) + '\');return false;">' ;     // Added by Bramus!
    • Add the created Delete Link to the page
      • Go to line #75 (#74 if you haven't added the Delete Link yet) where you'll find this:
        PLAIN TEXT
        JavaScript:
        1. oCell.innerHTML = sLink + '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"></a>' ;
      • Replace that line with:
        PLAIN TEXT
        JavaScript:
        1. oCell.innerHTML = sLink + '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"></a> ' +  dLink + '<img alt="" src="images/delete.gif" width="16" height="16" border="0"></a>' ;    // Modded by Bramus!
    • 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:
        PLAIN TEXT
        JavaScript:
        1. // Added by Bramus!
        2. function DeleteFile( fileName, fileUrl ) {
        3.     if (confirm('Are you sure you wish to delete ' + unescape(fileName) + '?')) {
        4.         oConnector.SendCommand( 'DeleteFile', "FileName=" + fileName, DeleteFileCallBack ) ;
        5.     }
        6. }
      • The DeleteFileCallBack function
        PLAIN TEXT
        JavaScript:
        1. // Added by Bramus!
        2. function DeleteFileCallBack ( fckXml ) {
        3.     var oNodes = fckXml.SelectNodes( 'Connector/Error' );
        4.     if (oNodes!=null && oNodes.length>0) {
        5.         var errNo = parseInt(oNodes[0].attributes.getNamedItem('number').value) ;
        6.        
        7.         switch (errNo) {
        8.             case 0 :
        9.             break;
        10.            
        11.             case 102 :
        12.             case 103 :
        13.                 alert(oNodes[0].attributes.getNamedItem('originalDescription').value);
        14.             break;
        15.            
        16.             default:
        17.                 alert('DFi: Invalid XML response from connector..');
        18.         }
        19.        
        20.     } else {
        21.         alert('DFi: Invalid XML response from connector.');
        22.     }
        23.     Refresh();
        24. }
  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
      PLAIN TEXT
      PHP:
      1. // Added by Bramus!
      2. function DeleteFile($resourceType, $currentFolder) {
      3.     $sErrorNumber = '0' ;
      4.     $sErrorMsg = '' ;
      5.    
      6.     if ( isset( $_GET['FileName'] ) ) {
      7.        
      8.         // Map the virtual path to the local server path.
      9.         $sServerDir = ServerMapFolder( $resourceType, $currentFolder ) ;
      10.        
      11.         $sFileName = $_GET['FileName'] ;
      12.        
      13.         if ( strpos( $sFileName, '..' ) !== FALSE ) {
      14.             $sErrorNumber = '102' ; // Invalid file name.
      15.             $sErrorMsg = 'Invalid file name';
      16.         } else {
      17.             if ( @unlink($sServerDir.$sFileName) ) {
      18.                 $sErrorNumber = '0' ; // deleted
      19.             } else {
      20.                 $sErrorNumber = '103' ; // not deleted
      21.                 $sErrorMsg = 'Could not delete file '.$sServerDir.$sFileName;
      22.             }
      23.         }
      24.     } else {
      25.         $sErrorNumber = '102' ; // no file set
      26.         $sErrorMsg = 'No file specified';
      27.     }
      28.    
      29.     // Create the "Error" node.
      30.     echo '<Error number="' . $sErrorNumber . '" originalDescription="' . ConvertToXmlAttribute( $sErrorMsg ) . '" />' ;
      31. }
  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:

      PLAIN TEXT
      PHP:
      1. case 'DeleteFile' : // Added by Bramus!
      2.     DeleteFile( $sResourceType, $sCurrentFolder ) ;
      3. break ;

Happy copy and pasting!

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

tinycme_content_tinyfck_like.jpg

Bramus.out!

Spread the word!

  • del.icio.us
  • digg
  • Ma.gnolia

About this entry

Date Published
Published:
Oct 18 2006 / 1:35 am
Categories
Categories:
Another Dailie, Digg This!, TinyMCE, Webdevelopment
Comments
Comments:
38 Comments
Jump to comment form

Best of Bram.us

My iSmudginator 0.2
My iSmudginator 0.2
Start getting used to scratching and smudging the iPhone with this Flash based iPhone Simulator
The Box Office
The Box Office
Automatically wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.
My Foxification (Pimp Your Firefox to be a web all-star)
My Foxification
Pimp Your Firefox to be a web all-star
The PHP Willow Tree
The PHP Willow Tree
A look at the inc.common.php, spreading handy functions.
My Photoshop Scripting
My Photoshop Scripting
Photoshop Script inspired in the Chlomoscript to unobtrusively pimp photos you have taken.
My TinyMCE File Management
Methods to adding file management options to TinyMCE (Part 1), Extending TinyFCK (Part 2) and PHP file uploads overview (Spinoff 1).