16 сентября 2009 в 15:01

CKEditor файловый менеджер

В связи с выходом новой версии популярного и весьма функционального WYSIWYG редактора, пришлось сделать небольшой файл менеджер.

Причиной тому послужило отсутствие по умолчанию стандартного файл менеджера, есть конечно CKFinder но он на платной основе.
Поискав разные альтернативы решил потратить время на создание простенького но своего файл менеджера на манер CKFinder'а, что вам и представляю.
Пришлось поискать как интегрировать его с редактором, документации мало, но в конце концов вроде получилось :)

Возможности: Загрузка нескольких файлов, создание папок, транслит закачиваемых файлов, переименование, хотя чего перечислять стандартно всё :)
Общий стиль на манер CKFinder в гамме ACDSee 3

Язык можно изменить в index.html
  1. <script type="text/javascript" src="lang/ru.js"></script>


Скриншот
ckeditor file manager

По поводу настроек:

Подключение в <head></head>
<script type="text/javascript" src="ckeditor.js"></script>
<script type="text/javascript" src="ajexFileManager/ajex.js"></script>
 


И непосредственно на странице
<script type="text/javascript">
var editor = CKEDITOR.replace('editor1');
ajexFileManager(editor, '/path/to/ckeditor');
</script>


Из основных настроек "ajax/cfg.php"
$cfg['url'] = 'upload'; // Папка для загрузок по типам, на манер как раньше было
$cfg['root'] = $_SERVER['DOCUMENT_ROOT'] . DIR_SEP . $cfg['url'] . DIR_SEP; // http://www.yousite.com/upload/        абсолютный путь до папки
$cfg['quickdir'] = ''; // Папка для быстрой загрузки, это закладка Закачать - не открывая файл менеджер, пример: $cfg['quickdir'] = 'quick-folder'; само собой будет по типам, если грузите изображение то оно попадет в /upload/image/quick-folder/filename.jpg
 
 
$cfg['thumb']['width'] = 150; // ширина создаваемых превьюшек
$cfg['thumb']['height'] = 120; // высота
$cfg['thumb']['quality']= 80; // качество сжатия
$cfg['thumb']['cut'] = true; // дабы превьюшки не вызывали смех они будут резаться, а не пропорционально уменьшаться
$cfg['thumb']['auto'] = true; // если изображения были закачены через ftp то автоматически превью не создастся, поэтому при включенной данной опции будет проверка на существование превьюшки
$cfg['thumb']['dir'] = '_thumb'; // скрытая папка которая будет создаваться там где лежат изображения, думал делать одну для всех, но решил пока так сделать
$cfg['thumb']['date'] = "j.m.Y, H:i"; // дата в отображении с именами файлов
 
// ну тут всё понятно, права выставляеме файлам и папкам при создании и загрузке
$cfg['chmod']['file'] = 0777;
$cfg['chmod']['folder'] = 0755;
 


Сам по себе не тяжелый (собственно несколько текстовых файлов), изображения расширений только объем занимают

Скачать:
Только сам файл менеджер (.rar ~335Kb)
Полностью вместе с CKEditor (.rar ~1.1Mb)


Файл менеджер делался для себя, но наверняка еще кому-нибудь пригодится. Не лишён глюков и некоторого функционала, всё постепенно со временем сделаю/исправлю, если интерес у сообщества будет :)
Последующие обновления буду публиковать здесь и у себя на сайте

P/S: Первый пост, кармы нету, поэтому в «web разработка» не могу перенести(fixed: спасибо за карму, перенёс), и подсветку синтаксиса для кода не нашёл покамесь как сделать здесь(спасибо за совет krig, думал здесь встроенная есть) :)

upd demo

upd
Исправил пару проблем:
— добавил предварительную проверку на php расширения gd и mbstring
— убрал ограничение на закачку файлов, оказывается стояли только графические файлы, теперь можно любые закачивать
— при переименовании файла не удалялась старая превьюшка, и теперь нельзя переименовывать в файлы без расширения и в недопустимые форматы :)

upd: 0.8.1
— Всё таки решил превьюшки ложить в отдельную папку, чтобы пачки папок не разводить, структура будет аналогичная оригиналу
— Сделал сортировку файлов
— Добавил в дерево размер папки
— Немного изменил структуру папок
— Сделал простенькую проверку на работоспособность, необходимо вызывать php файл напрямую с isWork, пример: ckeditor/ajexFileManager/ajax/php/ajax.php?isWork
— Ну и по мелочам исправил и изменил разное :)

upd: 0.8.2
— косметические изменения :)

В архиве файл менеджер и ckeditor + пример подключения
Скачать Ajex.FileManager 0.8.2 ~740 Kb
+35
13652
90
Demphest 25,0 G+

Комментарии (34)

+1
NeX, #
демо можно где-нибудь посмотреть?
0
Demphest, #
По поводу демо думал, думал сайт упадёт :)
Хотя сейчас организую.
0
snow, #
если надо где-то положить демку, — могу помочь — у себя положить.
0
Demphest, #
Спасибо, выложил у себя вроде сайт дышит, хостер не жалуется :), поэтому необходимости по крайней мере пока нету
0
krig, #
0
Demphest, #
Спасибо, сейчас сделаю.
0
andrew_tch, #
в гуглокод и всем по svn, допилим всем миром.
0
Demphest, #
Да, надо-бы, основные моменты необходимо до ума довести.
А то делался за пару дней как говорится на коленке :)
0
NeX, #
$dir = isset($_POST['dir'])? urldecode($_POST['dir']) : (isset($_GET['dir'])? urldecode($_GET['dir']) : '');

С такой проверкой (точнее, с ее отстуствием) рабочей директории файл менеджер можно использовать только в административной части…
0
Demphest, #
Да, такие нюансы есть, + нету проверки пользователя, это уже на совести подключаемого.
Аналогично было в оригинальном редакторе, позже при нахождении более оптимального варинта добавлю.
0
StreetAngel, #
Класс, а можно сделать чтобы не в отдельном окне открывался? и стиль аналогичный редактору?
P.S. Если нужно, с дизайном могу помочь.
0
Demphest, #
Стиль подобный редактору — конечно, тем более графика не нужна особо, простые цвета считай.
А вот по поводу «не в отдельном окне», вот это уже загвоздка :) настолько заморачиваться уже будет наверно лишним.
А как визуально и в каком месте вы себе это представляете?
Новое окно мне кажется более оптимальный и легкий вариант.
0
StreetAngel, #
Может так?


только «дерво» тоже серым bg,
и может меню с правой кнопки убрать?
и что если FancyUpload добавить?
0
Demphest, #
Можно конечно, но на это уйдет уйма времени, ковыряние оригинального кода, а вникать там — мама не горюй :) опять же, собственно это и единственная — основная проблема скажем так.
С правой кнопки меню убрать можно, но как мне кажется перенос его вверх тоже особого удобства не добавляет.
FancyUpload не использовал, сейчас посмотрел описание, отталкивает необходимость флэша, причина не именно в нём, а в безопасности (хотя не знаю как сейчас), если производить загрузку чере флэшку то сеанс сессии пропадает (только для неё), поэтому необходимо делать костыли по сохранению или передачу в адресе id сессии, если этого не делать и знать на какой адрес кидать файлы, то можно натворить делов :) но это зависит конечно от уровня доступности, что можно загружать, проверяются файлы или нет, и т.д.
0
soloweb, #
Вот сейчас как раз интегрирую ее на работа.ру :-) Вещь не плохая но вот почему-то с callback функциями дела обстоят не очень, их там вообще нет! :-( Или может я плохо в API разобрался.

Вообщем скоро полезу в код, но так не хотелось этого делать :-)

А за ценный совет в виде коммента буду благодарен :-)
0
Demphest, #
Я по функциям CKFinder ковырял только, насколько понял основные моменты для взаимодействия осуществляются следующей функцией:

CKEDITOR.tools.callFunction(numberFunction, input, data);

Вот её и надо копать :)
0
soloweb, #
var editor = CKEDITOR.replace( 'textarea1' );
editor.on( 'instanceReady', function()
{

};

— А это как событие на изминение можно поставить :-)

editor.document.on ( 'keydown', function() {… });

Ну конечно жалко что документация пока никакая :-(

Как говорится лучшая документация — это исходный код! :-)
0
Demphest, #
До такого к сожалению не добирался :)

Если бы там исходный код был в человеческом виде :)
0
soloweb, #
Там папка есть, называется _sorcues если не ошибаюсь! В ней код в нормальном виде :-)
НЛО прилетело и опубликовало эту надпись здесь
0
Demphest, #
У меня на сайте можно скачать полный комплект не упакованный.
НЛО прилетело и опубликовало эту надпись здесь
0
bolkhovsky, #
Отличная работа, спасибо!
+2
hoglet, #
хочу такой к tiny mce (
0
Demphest, #
Думаю что проблем особых не должно быть с портированием, попробую покопать в этом направлении при следующих изменениях.
0
Stalker_RED, #
не такой, но тоже неплох: tinyfck
0
GEMOzloBIN, #
ИМХО над юзабилити надо подумать, пока разберешься как загрузить картинку столько времени пройдет, да и контекстное меню по правому клику наверно не самый лучший вариант на опере вообще может не работать, так как в ней политика браузера может запрещать подменять контекстное меню вызываемое по правому клику.
0
Demphest, #
Согласен, юзабилити надо проработать.
Первый вариант, делался по примеру CKFinder, но как мне в принципе кажется и относительно удобен, вот с оперой — да, проблемка контексткой.
0
flaresun, #
А куда надо ткнуть, чтобы появился файловый менеджер?
Перехожу по ссылке, и вижу только редактор
0
Demphest, #
Кнопки:
— Вставить/Редактировать ссылку (изображение глобуса)
— Изображение

В открывшемся окне есть кнопка «Посмотреть на сервере»
0
flaresun, #
Воо, теперь смог посмореть :) Не плохой file manager, но надо было написать как до него добраться…
+1
ilyuha, #
В свое время сделал обзор трех визивиг-редакторов. Мало что меняется, все нужно настраивать ручками :).

НЛО прилетело и опубликовало эту надпись здесь
0
Demphest, #
Пожалуйста
У этой темы кстати продолжение в другой ветке :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.