Integración con otros productos¶
elFinder se ha desarrollado pensando en que va a ser integrado en soluciones ya disponibles.
elRTE¶
Al instanciar elRTE, le pasamos la función que abrirá el gestor en una ventana de dialogo y pasará a editorCallback la función que aceptará la URL del fichero seleccionado como el argumento único:
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' }, // abrimos en una ventana de dialogo
8 closeOnEditorCallback : true, // cerramos después de seleccionar el fichero
9 editorCallback : callback // pasamos la función callback al gestor
10 })
11 }
12 })
translate
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¶
El dialogo para insertar un enlace o una imagen se abre en la misma ventana, pero el gestor se abre en una nueva:
1 CKEDITOR.replace('textarea_id', {
2 filebrowserBrowseUrl : 'elfinder.html'
3 })
elfinder.html después de incluir jQuery, jQueryUI y elFinder:
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¶
El dialogo para insertar un enlace o una imagen y el gestor se abren en ventanas nuevas.
Creamos el editor:
1 tinyMCE.init({
2 // Opciones generales
3 mode : "textareas",
4 // ... opciones
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 // Guardamos los parámetros en las variables globales del window (no es la mejor solución, pero algo es algo),
8 // o podemos pasar los parámetros en el GET y después parsearlos en elfinder.html
9 w.tinymceFileField = field_name;
10 w.tinymceFileWin = win;
11 }
12 })
elfinder.html después de incluir jQuery, jQueryUI y elFinder:
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/