RSS Мои друзья Контакты

sjFilemanager - Эволюция. PHP + AJAX файловый менеджер

Когда-то, давным давно все началось с этого и этого. Вообще-то благодаря тому, что я написал файловый менеджер я завел блог и получил аккаунт на Хабре. С тех пор много чего изменилось и произошло.

sjFilemanager v1.0b

Начнем с примера

Думаю для начала все хотят попробовать, что-там интересного

  • здесь, только файловый менеджер на странице
  • здесь, только редактор изображений на странице
  • здесь, только файловый менеджер в попапе
  • здесь, файловый менеджер и редактор изображений в попапе

Об основных изменениях можно почитать на Хабре, а здесь поговорим о настройках

Установка

Установить можно скачав с GIT репозитория git://github.com/stalniy/sjFilemanager.git

Обратная связь

Просьба все найденные баги и предложения писать здесь или в комментариях

Конфигурация

Теперь, чтобы инициализировать файловый менеджер нужно намного меньше строчек кода. Все лишнее удалено или перенесено в настройки по умолчанию. Будем рассматривать пример с полным функционалом, где файловый менеджер работает вместе с редактором рисунков. Как всегда нужно что-то подключить, а именно ряд файлов. Так как нам нужно для продакшена, то будем подключать уменьшенный вариант css и javascript. Если нужна локализация на другой язык, то подключаем также файл переводов.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Файловый и медиа менеджеры в окне</title>
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript" src="/demos/sj_filemanager/js/lang/lang_ru.js"></script>
<script type="text/javascript" src="/demos/sj_filemanager/js/sjFilemanager.full.js"></script>
<link href="/demos/sj_filemanager/css/sjFilemanager.full.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/weCmsPlugin/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
sjs.ready(function(){
sjWindow.renderView();
MediaManager.renderView($_LANG);

var baseUrl = '/demos/sj_filemanager/';

var w = FileManage.getInstance(null, baseUrl + "?tmpl=window&show_actions=1", {
actionUrl: baseUrl,
rootUrl: '/uploads/sjFilemanager'
},{
move: true,
resizable: true
}).attachListeners({
ready: function() {
this.setUploader(FileManage.getUploader(baseUrl));
MediaManager.getInstance(sjs('#sjMediamanager').insertBefore('#sjWrapper').find('.sjMediaWrapper'), {
lazy: true,
saveUrl: baseUrl
}).syncWithFileManager(this, 'refresh');
},
click: function() {
var mm = MediaManager.getInstance(), files;
this.makeStek();
if (!mm.isSleepy && (files = this.getFiles())) {
mm.setFiles(files).showFile();
}
}
});
});

tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "media,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
editor_selector : "mceEditor",
language : "en",
convert_urls: false,
theme : "advanced",
debug : false,
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : true,
// Theme options
theme_advanced_buttons1 :"undo,redo,|,bold,italic,underline,strikethrough,forecolor,backcolor,|,sub,sup,charmap,|,hr,removeformat",
theme_advanced_buttons2 : "pastetext,pasteword,|,search,|,bullist,numlist,|,outdent,indent,|,link,unlink,image,media,cleanup,code,fullscreen",
theme_advanced_buttons3 : "tablecontrols",
//theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : false,
file_browser_callback: function(field, url, type, win){
if (window.FileManage) {
sjWindow.max_zIndex=301000;
FileManage.choiseCallback(field, '', type, win);
}
}
});
</script>
</head>
<body>
<h2>sjFilemanager + sjMediamanager + tinyMCE</h2>
<textarea cols="60" rows="20" class="mceEditor"></textarea>
</body>

Когда все DOM объекты загрузятся на странице, начинаем инициализацию менеджера. Но сначала рисуем шаблоны для попапа и редактора рисунков

sjWindow.renderView();
MediaManager.renderView($_LANG);

Потом устанавливаем базовый URL - это путь к директории web файлового менеджера. У меня на сайте, сам код библиотеки не доступен через http, а директория demos/sj_filemanager является символьной ссылкой на каталог web.

Если на странице нужен только один файловый менеджер (так бывает в большинстве случаев), то для этого реализован интерфейс Singleton в методе getInstance. При первом вызове метода, нужно передать конфигурационные параметры. Рассмотрим их

  • первый параметр - это callback функция для insert экшена. Необходимо в тех случаях, когда нужно передать информацию о файлах куда-то, например, в tinyMCE или на страницу
  • второй параметр - это url по-которому получаем список файлов, в основном он всегда остается одним и тем же
  • третий параметр - это хэш конфигурации для файлового менеджера. Допустимые опции:
    • actionUrl - обязательный, url к файлу, который обрабатывает все действия
    • dirUrl - необязательный, url к файлу, который отвечает за чтение директорий, по умолчанию равно actionUrl
    • rootUrl - необязательный, url к директории, где лежат файлы. В основном необходим для связки с редактором рисунков и tinyMCE
    • actionSel - необязательный, селектор, по которому можно найти блок, в котором находятся все экшены, по умолчанию равно #sjFmActions
    • uploader - необязательный, объект отвечающий за загрузку файлов
    • rowTemplate - необязательный, шаблон строки файла, по умолчанию <tr>....</tr>
  • четвертый параметр - необязательный, конфигурация window менеджера. Настроек здесь очень много, думаю в большинстве случаев подойдут дефолтные

Потом привязываем listener-и на события, на самом деле это просто callback функции, т.е. на одно событие можно повесить только одну функцию, думаю большего пока не нужно. Но благодаря абстракции в будущем это можно просто изменить.

Так как мы хотим объединить работу файлового менеджера и редактора рисунков, то в момент когда инициализируется первый, нужно создать второй и познакомить их. Что мы и делаем при помощи события ready. Также в этом listener-е на это событие, создаем объект uploader-а, в данном случае - это SWFUpload. Если нужно переопределить какие-то стандартные настройки uploader-а, то в метод FileManage.getUploader втором параметром можно передать hash.

Редактор рисунков, я его назвал медиа менеджер, инициализируется по аналогии к файловому менеджеру. Но прежде, создаем для него (медиа менеджера) шаблон и переносим в попап окно к файловому менеджеру. Рассмотрим параметры конфигурации медиа менеджера

  • первый параметр - обязательный, DOM объект, в котором будет содержатся контент редактора
  • второй параметр - необязательный, конфигурация
    • panel - необязательный, селектор, по-которому можно найти панель экшенов для редактора. По умолчанию .sjMediaPanel
    • lazy - необязательный, указывает, что нужно инициализировать редактор частично. По умолчанию false
    • mode - необязательный, указывает поведение редактора. Возможны 2 варианта: preview, full. По умолчанию preview
    • files - необязательный, список обрабатываемых файлов

Потом вызываем метод медиа менеджера syncWithFileManager, который позволяет добавить кнопку открытия редактора в панель файлового менеджера. На событие click по файлу или папке, проверяем включен ли медиа менеджер, если включен, то передаем ему выбранные файлы и показываем первый из них.

Для работы с tinyMCE используется все тот же метод FileManage.choiseCallback, в который передается DOM объект input поля и url, по-которому можно получить доступ к файлам (по умолчанию берется rootUrl из файлового менеджера). Для window менеджера устанавливается большой zIndex, для того чтобы перекрить окно tinyMCE, в котором zIndex очень большой.

Для упрощения совместной инициализации был написан простой метод, т.е. чтобы инициализировать менеджер достаточно передать url к его web директории и url к директории, где находятся файлы, которые находятся под ответственностью менеджера

FileManage.createAndAttachMedia(baseUrl, rootUrl[, translations]);

Конфигурация в серверной части не изменилась, она находится в lib/php/config.php. Более детально о ней можно узнать здесь

UPDATE:

  • исправлен баг: отсутствие сообщения при попытке создать каталог не имея на это прав доступа
  • добавлена возможность передавать настройки для загрузчика SWFUpload
    FileManage.createAndAttachMedia(baseUrl, rootUrl[, translations[,uploaderConfig]]);
  • конфигурация на backend-е вынесена config.json файл
  • архив с примером интеграции sjFilemanger + TinyMCE (достаточно розархивировать его в корне виртуального хоста)

Читайте также:

Добавить комментарий

Комментариев: 19

  • dekameron
    Ответить 30 октября 2011 г., 17:00
    Здравствуйте.
    Есть пожелания насчет юзабилити, а именно:
    - При прокрутке "уезжает" вверх верхня панель, не очень удобно прокручивать страницу вверх, чтобы выполнить какое либо действие с файлом в самом низу списка
    - когда панель зафиксировать, она заступает чекбоксы для выбора елементов списка
    - нет подсказки к первому елементу верхней панели (пока не тыкнул на него не знал, для чего он)
    - само расположение елементов верхней панели немного странное и лично я в нем теряюсь (последовательность команд не такая, как в большинстве ПО работающем с любыми документами\списками)
  • Konsnatin
    Ответить 31 августа 2012 г., 12:23
    Здравствуйте,
    Помогите прикрутить менеджер к TinyMCE. Указанная конфигурация не работает. http://www.weblancer.net/projects/430932.html
    • Сергей (Администратор)
      Ответить 31 августа 2012 г., 23:44
      Я обновил топик. Добавил ссылку на архив интеграции tinyMCE и sjFilemanger
      • Konstantin
        Ответить 3 сентября 2012 г., 7:05
        Большое спасибо!
        А есть возможно встроить менеджер как плагин tinymce, чтобы панели отображалась отдельно кнопочка файлового менеджера?
        • Сергей (Администратор)
          Ответить 3 сентября 2012 г., 8:16
          Можно, но зачем писать плагин? Он хоть и будет простым, но придется изменить реализовать кнопки "Insert", чтобы при вставке любого файла, в редактор из менеджера, была возможность задать какие-то параметры (align, width, height, alt, etc). Думаю это лишняя робота, так как все это реализовано уже в TinyMCE
      • Константин
        Ответить 5 сентября 2012 г., 16:26
        Архив инграции "как есть" работает отлично. Но когда я начал внедрять себе начались косяки: http://test.atsar.ru/index.html
        • Сергей (Администратор)
          Ответить 5 сентября 2012 г., 17:12
          Да вижу. Проблема в том, что у Вас в настройках виртуального хоста Apache не указано:
          DirectoryIndex index.php

          Сегодня исправлю, чтобы запросы отправлялись на index.php, а сейчас просто на директорию. Т.е.
          - сейчас: /sj_filemanager/web/?tmpl=window&show_actions=1
          - нужно: /sj_filemanager/web/index.php?tmpl=window&show_actions=1

          Спасибо=) Думаю также стоит добавить ошибку: Empty server response
          • Konstantin
            Ответить 6 сентября 2012 г., 9:35
            Большое спасибо.
            Буду ждать.
            • Сергей (Администратор)
              Ответить 6 сентября 2012 г., 19:13
              Архив обновил. Решение оказалось довольно простым. Сейчас к сожалению нет времени, чтобы зарефакторить код
              • Konstantin
                Ответить 21 сентября 2012 г., 14:20
                http://test.atsar.ru/ не работает загрузка файлов, не подгружается flash кнопка.
  • Сергей
    Ответить 26 ноября 2012 г., 12:05
    где можно скачать код?
    • Сергей (Администратор)
      Ответить 26 ноября 2012 г., 22:24
      Версию 1.0 можно скачать с Github: https://github.com/stalniy/sjFilemanager/tree/1.0
      Сейчас в разработке версия 1.2 (в master-e на Github-e) на стадии фикса багов. Изменилось полностью API и написан backend adapter на Ruby Rack.
  • Роман
    Ответить 5 мая 2013 г., 15:48
    Здравствуйте. Можно узнать у вас из-за чего может возникать ошибка 404 при загрузке файла... все остальное работает...
  • Alex
    Ответить 19 мая 2013 г., 15:13
    скачал сборку не работает второй параметр baseUrl
    в файле filemaneger.js функцию FileManage.createAndAttachMedia можно хоть удалить не какой эффект это на скрипт не производит
    FileManage.createAndAttachMedia("sj_filemanager/web/index.php", "uploads", $_LANG);

    мене нужно добавить свои геты к запросу как это сделать и что это за фаитл такой sjFilemanager.full.js там сам черт ногу сломит что это такое?
    • Сергей (Администратор)
      Ответить 19 мая 2013 г., 19:16
      Работа над проектом остановлена ввиду того, что не хватает времени.
      То, что находится в файле sjFilemanager.full.js называется минимизированным и обфусцированным кодом (google в помощь).
      • Alex
        Ответить 19 мая 2013 г., 20:10
        так с чего начать где можно найти момент конфигурирования гет запроса и загруски index.php
        • Сергей (Администратор)
          Ответить 19 мая 2013 г., 22:51
          Я уже ответил на Ваш вопрос. Рекомендую Вам использовать elfinder.
  • Destructor
    Ответить 8 июля 2013 г., 9:21
    Скачал менеджер и попытался запустить примеры поставляемые вместе с менеджером, но не тут то было. Не один из примеров не работает. Подскажите где посмотреть, так как у себя в скрипте я буду применять код по образцу этих примеров, то их работа очень важна. В опубликованных на http://freaksidea.com/examples/sjFilemanager/fm-in-window примерах ошибок нет.
    • Сергей (Администратор)
      Ответить 11 июля 2013 г., 8:16
      Поддержку этого кода я забросил и врятли буду востанавливать. Существует достаточно хороший менеджер на jquery - elfinder. Можете использовать его