Интеграция с редакторами¶
elFinder специльно разработан таким образом, чтобы его легко можно было интегрировать в уже существующие решения.
elRTE¶
При инициализации elRTE передаем ему функцию, которая откроет файловый менеджер в диалоговом окне и передаст в editorCallback функцию, принимающую URL выбраного файла в качестве единственного аргумента:
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' }, // открываем в диалоговом окне
8 closeOnEditorCallback : true, // закрываем после выбора файла
9 editorCallback : callback // передаем callback файловому менеджеру
10 })
11 }
12 })
Внимание: Если не задать id - elFinder не будет запоминать последнюю открытую папку и вид директории, кроме того при частом открытии/закрытии окна elfinder возможны проблемы со слишком большим кол-вом cookiеs на один домен.
CKEditor¶
Диалог для вставки ссылки или изображения открывается в том же окне, а файловый менеджер в новом:
1 CKEDITOR.replace('textarea_id', {
2 filebrowserBrowseUrl : 'elfinder.html'
3 })
В elfinder.html после подключения jQuery, jQueryUI и 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¶
Диалог для вставки ссылки или изображения и файловый менеджер открываются в новых окнах.
Создаем редактор:
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 // Сохраняем необходимые параметры в глобальных переменных окна (не самое лучшее решение, предложите другое?),
8 // или можете передавать параметры в GET и потом разбирать их в elfinder.html
9 w.tinymceFileField = field_name;
10 w.tinymceFileWin = win;
11 }
12 })
В elfinder.html после подключения jQuery, jQueryUI и 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¶
Сайт плагина: http://drupal.org/project/elfinder
Скачать: http://sourceforge.net/projects/drupal-elfinder/
WordPress¶
Сайт плагина: http://wordpress.org/extend/plugins/wp-elfinder/