/[drupal]/contributions/modules/imce/README.txt
ViewVC logotype

Diff of /contributions/modules/imce/README.txt

Parent Directory Parent Directory | Revision Log Revision Log | View Revision Graph Revision Graph | View Patch Patch

revision 1.11.2.7, Mon Sep 21 12:08:25 2009 UTC revision 1.11.2.8, Fri Sep 25 13:30:57 2009 UTC
# Line 45  Notes: Line 45  Notes:
45   - When you configure IMCE for inline image/file insertion into textareas there should appear an IMCE link under each textarea you specified.   - When you configure IMCE for inline image/file insertion into textareas there should appear an IMCE link under each textarea you specified.
46   - If you are uploading files containing unicode characters, it is strongly recommended to use the transliteration module that sanitizes filenames by converting characters from unicode to us-ascii. http://drupal.org/project/transliteration   - If you are uploading files containing unicode characters, it is strongly recommended to use the transliteration module that sanitizes filenames by converting characters from unicode to us-ascii. http://drupal.org/project/transliteration
47   - If you are using CCK, you may want to check the Imce CCK Image module at http://drupal.org/project/imceimage   - If you are using CCK, you may want to check the Imce CCK Image module at http://drupal.org/project/imceimage
48     or the File field sources module at http://drupal.org/project/filefield_sources
49    
50    
51  ~~~~~~FREQUENTLY FACED ISSUES~~~~~~  ~~~~~~FREQUENTLY FACED ISSUES~~~~~~
# Line 65  Jquery form plugin before version 2.09 h Line 66  Jquery form plugin before version 2.09 h
66    
67  - IMCE may have problem working with Google Analytics and Secure pages modules. Just make sure to add imce* path to the exceptions list of these modules.  - IMCE may have problem working with Google Analytics and Secure pages modules. Just make sure to add imce* path to the exceptions list of these modules.
68    
69    
70  ~~~~~~~INTEGRATION METHODS~~~~~~~  ~~~~~~~INTEGRATION METHODS~~~~~~~
71    
72    If you are using WYSIWYG module, you must also download and install http://drupal.org/project/imce_wysiwyg bridge module and enable IMCE as a plug-in in WYSIWYG settings.
73    
74  Here are the applications whose users are lucky that they don't have to read the details of integration methods.  Here are the applications whose users are lucky that they don't have to read the details of integration methods.
75    
76  BUEditor: Obviously, the author knows how to integrate IMCE to his application:). Users need nothing to do.  BUEditor: Obviously, the author knows how to integrate IMCE to his application:). Users need nothing to do.
77    
78  FCKeditor: Another module from another blessed author, which makes IMCE integration as simple as a single click. Fckeditor profile->File browser settings->IMCE integration  FCKeditor(without WYSIWYG): Another module from another blessed author, which makes IMCE integration as simple as a single click. Fckeditor profile->File browser settings->IMCE integration
79  Note: One can also override the settings at advanced settings->custom javascript configuration.  Note: One can also override the settings at advanced settings->custom javascript configuration.
80  Here are the lines that force imce integration (don't force unless you need to):  Here are the lines that force imce integration (don't force unless you need to):
81  LinkBrowser= true;  LinkBrowser= true;
# Line 81  LinkBrowserURL= '/?q=imce&app=FCKEditor| Line 85  LinkBrowserURL= '/?q=imce&app=FCKEditor|
85  ImageBrowserURL= '/?q=imce&app=FCKEditor|url@txtUrl|width@txtWidth|height@txtHeight';  ImageBrowserURL= '/?q=imce&app=FCKEditor|url@txtUrl|width@txtWidth|height@txtHeight';
86  FlashBrowserURL= '/?q=imce&app=FCKEditor|url@txtUrl';  FlashBrowserURL= '/?q=imce&app=FCKEditor|url@txtUrl';
87    
 TinyMCE: See http://drupal.org/node/241753#comment-792305  
   
88  There may be other applications that integrated IMCE already. If your application is not one of them, please keep reading.  There may be other applications that integrated IMCE already. If your application is not one of them, please keep reading.
89    
90    
# Line 101  Now let's go through the integration met Line 103  Now let's go through the integration met
103  When IMCE is opened using an url that contains &app=applicationName|fileProperty1@FieldId1|fileProperty2@FieldId2|...  When IMCE is opened using an url that contains &app=applicationName|fileProperty1@FieldId1|fileProperty2@FieldId2|...
104  the specified fields are filled with the specified properties of the selected file.  the specified fields are filled with the specified properties of the selected file.
105    
106  Avaliable file properties are: url, name, size(formatted), width, height, date(formatted), bytes(integer size in bytes), time(integer date timestamp)  Avaliable file properties are: url, name, size(formatted), width, height, date(formatted), bytes(integer size in bytes), time(integer date timestamp), id(file id for newly uploaded files, 0 or integer), relpath(rawurlencoded path relative to file directory path.)
107    
108  In our CASE, we should open IMCE using this URL: /?q=imce&app=myApp|url@urlField which contains our application name and our url field id  In our CASE, we should open IMCE using this URL: /?q=imce&app=myApp|url@urlField which contains our application name and our url field id
109    
# Line 116  Clicking the files in preview do the sam Line 118  Clicking the files in preview do the sam
118  - What if we had another field for another file property e.g, Size: <input type="text" id="file-size"> ?  - What if we had another field for another file property e.g, Size: <input type="text" id="file-size"> ?
119  - We should have opened imce using this URL: /?q=imce&app=myApp|url@urlField|size@file-size  - We should have opened imce using this URL: /?q=imce&app=myApp|url@urlField|size@file-size
120    
121  IMCE 6.x-1.2 brought two other special properties(onload and sendto) allowing more flexibility.  
122  - onload:  - USING imceload:
123  You can point a predefined function to be executed when IMCE loads.  You can point a predefined function to be executed when IMCE loads.
124  When the URL is like ...&app=myApp|onload@myOnloadFunc, IMCE looks for myOnloadFunc in the parent window and executes it with the window parameter referring to IMCE window.  When the URL is like "app=myApp|imceload@myOnloadFunc", IMCE looks for "myOnloadFunc" in the parent window and executes it with the window parameter referring to IMCE window.
125  function myOnloadFunc (win) {//any method of imce is available through win.imce  function myOnloadFunc (win) {//any method of imce is available through win.imce
126    win.imce.setSendTo('Give it to myApplication baby', myFileHandler);//you should also define myFileHandler    win.imce.setSendTo('Give it to myApplication baby', myFileHandler);//you should also define myFileHandler
127  }  }
128  - sendto:  
129    - USING sendto:
130  You can point a predefined function to which the selected files are sent.  You can point a predefined function to which the selected files are sent.
131  When the URL is like ...&app=myApp|sendto@myFileHandler, IMCE calls myFileHandler function of the parent window with file and window parameters.  When the URL is like "app=myApp|sendto@myFileHandler", IMCE calls "myFileHandler" function of the parent window with file and window parameters.
132  function myFileHandler (file, win) {  function myFileHandler (file, win) {
133    $('#urlFieldId').val(file.url);//insert file url into the url field    $('#urlFieldId').val(file.url);//insert file url into the url field
134    win.close();//close IMCE    win.close();//close IMCE
135  }  }
136  Usually sendto method is easier to implement, on the other hand onload method is more flexible as you manually add your sento operator and also can do any modification before IMCE shows up.  Usually sendto method is easier to implement, on the other hand imceload method is more flexible as you manually add your sento operator and also can do any modification before IMCE shows up.
   
   
 ~~~~~~INTEGRATION BY ONLOAD~~~~~~  
   
 A more flexible method that gives a finer control over IMCE.  
 Note: This could be extended to alter the content or the interface of IMCE by using its javascript methods.  
   
 var imcePopup;// this is our global variable referring to IMCE window. We use it for tracking its open/closed state  
   
 function openFileBrowser() {  
   
   // if IMCE is closed or not opened yet.  
   if (typeof imcePopup == 'undefined' || imcePopup.closed) {  
   
     //open IMCE  
     imcePopup = window.open('/?q=imce', '', 'width=760,height=560,resizable=1');  
   
     //we create a function that runs when IMCE loads, by setting the imceOnLoad property of the window  
     //It is automatically called by IMCE with a single parameter(win) referring to IMCE window.  
     //We can access all methods of IMCE using win.imce  
     imcePopup['imceOnLoad'] = function (win) {  
       //we use IMCE's setSendTo method to make a selected file sent to our imceFinish function  
       //setSendTo(title, function) creates an operation tab that has the "title" and runs the "function" on click.  
       win.imce.setSendTo('Give it to myApplication baby', imceFinish);  
     }  
   }  
   
   //knowing the popup is opened, we bring it into view.  
   imcePopup.focus();  
 }  
   
 //Finalizing function that is executed when the user selects a file for our application.  
 //This function is called with two parameters.  
 //file is the file object having the properties: url, name, size, width, height, date, bytes, time  
 //win is the reference to IMCE window. We can access all IMCE methods using win.imce  
 function imceFinish(file, win) {  
   //We set the value of our url field using file.url  
   document.getElementById('urlField').value = file.url  
   //hide the popup. We don't close it in order to save time for later use.  
   win.blur();  
 }  
137    
138    
139  ~~~~~~~ADVANCED INTEGRATION~~~~~~~~~  ~~~~~~~ADVANCED INTEGRATION~~~~~~~~~
# Line 182  In case: Line 144  In case:
144  - Your application wants to gain total control over IMCE.  - Your application wants to gain total control over IMCE.
145  Then you should consider applying advanced integration.  Then you should consider applying advanced integration.
146    
147  The initial step of advanced integration is the same as onload-integration above.  The initial step of advanced integration is the same as imceload-integration above.
148    
149  We open IMCE and set its imceOnLoad function:  We open IMCE and set its imceOnLoad function:
150    
151  imcePopup = window.open('/?q=imce', '', 'width=760,height=560,resizable=1');  window.open('/?q=imce&app=myApp|imceload@initiateMyApp', '', 'width=760,height=560,resizable=1'); //initiateMyApp(win) will run when imce loads
 imcePopup['imceOnLoad'] = initiateMyApp;//initiateMyApp(win) will run when imce loads  
152    
153  Now we define our initiator function in which we do the necessary manipulations to IMCE interface:  Now we define our initiator function in which we do the necessary manipulations to IMCE interface:
154    
# Line 220  imce.selected: object containing current Line 181  imce.selected: object containing current
181  File related methods  File related methods
182  imce.fileAdd(file): adds the file object to the list. file object has the properties; name, size(bytes), width, height, date(timestamp), fsize(formatted), fdate(formatted)  imce.fileAdd(file): adds the file object to the list. file object has the properties; name, size(bytes), width, height, date(timestamp), fsize(formatted), fdate(formatted)
183  imce.fileRemove(fiile_id): removes the file having the file_id from the list.  imce.fileRemove(fiile_id): removes the file having the file_id from the list.
184  imce.fileGet(file_id). returns the file object having the file_id. file object contains name, url, size, bytes, width, height, date, timestamp  imce.fileGet(file_id). returns the file object having the file_id. file object contains name, url, size, bytes, width, height, date, time, id(file id for newly uploaded files, 0 or integer), relpath(rawurlencoded path relative to file directory path.)
185    
186  File operations  File operations
187  imce.opAdd(op): adds an operation tab to the interface. op contains name, title, content(optional), func(optional onclick function)  imce.opAdd(op): adds an operation tab to the interface. op contains name, title, content(optional), func(optional onclick function)
# Line 232  imce.setMessage(msg, type): logs a messa Line 193  imce.setMessage(msg, type): logs a messa
193  NOTE:  NOTE:
194  - All URL strings in the examples start with "/" considering the base path is "/".  - All URL strings in the examples start with "/" considering the base path is "/".
195  In case your drupal is running on a sub directory e.g, http://localhost/drupal, these URLs should start with "/drupal/".  In case your drupal is running on a sub directory e.g, http://localhost/drupal, these URLs should start with "/drupal/".
196  There is a safer solution that does not require manual URL fixing: If the Drupal javascript object is avaliable in your page you can use Drupal.settings.basePath at the beginning of URLs (Drupal.settings.basePath+'?q=imce....')  There is a safer solution that does not require manual URL fixing: If the Drupal javascript object is avaliable in your page you can use Drupal.settings.basePath at the beginning of URLs (Drupal.settings.basePath+'?q=imce....'). This won't work multilingual paths with language prefixes.
197  - file and directory ids(names) used in imce.js are url encoded forms of original names. They are decoded using imce.decode and displayed in the lists.  - file and directory ids(names) used in imce.js are url encoded forms of original names. They are decoded using imce.decode and displayed in the lists.
Legend:
Removed from v.1.11.2.7  
changed lines
  Added in v.1.11.2.8
  ViewVC Help
Powered by ViewVC 1.1.2