Integration with other products¶
elFinder designed in a such way that that it could easily integrated into existing solutions.
elRTE¶
During elRTE initialization pass function that will open file manager in dialog window and return editorCallback function, which accepts URL to file as only argument:
1 $('selector').elrte({
2 // ... elrte options
3 fmOpen : function(callback) {
4 $('<div id="myelfinder" />').elfinder({
5 url : 'connectors/php/connector.php',
6 lang : 'ru',
7 dialog : { width : 900, modal : true, title : 'Files' }, // open in dialog window
8 closeOnEditorCallback : true, // close after file select
9 editorCallback : callback // pass callback to file manager
10 })
11 }
12 })
Attention: If you do not define id attribute - elFinder will not be able to remember last open directory and selected view, it also will result in unneeded cookie creation that can lead to max cookie per domain problem.
CKEditor¶
Dialog for link or image insertion opens in the same window but file manager in a new one:
1 CKEDITOR.replace('textarea_id', {
2 filebrowserBrowseUrl : 'elfinder.html'
3 })
In elfinder.html include jQuery, jQueryUI, elFinder and after add:
1 $().ready(function() {
2
3 var funcNum = window.location.search.replace(/^.*CKEditorFuncNum=(\d+).*$/, "$1");
4 var langCode = window.location.search.replace(/^.*langCode=([a-z]{2}).*$/, "$1");
5
6 $('#finder').elfinder({
7 url : 'connectors/php/connector.php',
8 lang : langCode,
9 editorCallback : function(url) {
10 window.opener.CKEDITOR.tools.callFunction(funcNum, url);
11 window.close();
12 }
13 })
14
15 })
TinyMCE¶
Dialog for link or image insertion and file manager open in new windows.
Create editor:
1 tinyMCE.init({
2 // General options
3 mode : "textareas",
4 // ... any options
5 file_browser_callback : function(field_name, url, type, win) {
6 var w = window.open('http://localhost/absolute/url/to/elfinder.html', null, 'width=600,height=500');
7 // Save required parameters in global variables of window (not the best solution, can offer better?)
8 // else you can pass parameters using GET and than parse them in elfinder.html
9 w.tinymceFileField = field_name;
10 w.tinymceFileWin = win;
11 }
12 })
In elfinder.html include jQuery, jQueryUI, elFinder and after add:
1 $('#finder').elfinder({
2 url : 'connectors/php/connector.php',
3 lang : 'ru',
4 editorCallback : function(url) {
5 window.tinymceFileWin.document.forms[0].elements[window.tinymceFileField].value = url;
6 window.tinymceFileWin.focus();
7 window.close();
8 }
9 })
Drupal¶
Plugin homepage: http://drupal.org/project/elfinder
Download: http://sourceforge.net/projects/drupal-elfinder/
WordPress¶
Plugin homepage: http://wordpress.org/extend/plugins/wp-elfinder/