PHP. Файловый менеджер для CKeditor — CKfsys

ВНИМАНИЕ: Существует более новая версия файлового менеджера — CKfsys 2.

Из-за чего суета?

В визуальном редакторе CKeditor нет файлового менеджера. У его предшественника FCKeditor был файловый менеджер, но он имеел ряд недостатков, которые мешают полноценно работать с этим замечательным (по моему мнению) редактором.
Существует расширенный файловый менеджер CKFinder, но он платный, и лицензия для 1 сайта на момент написания статьи стоит 59$... Многовато, лучше доделать то что есть до ума.
Так что потратив недельку на разбор того как работает встроенный файловый менеджер я переделал все части, которые меня не устраивали.

Нетерпеливые сразу могут посмотреть пример →

Первым шагом был немного доработанный файловый менеджер FCKEditor v1.
Вторым — полноценный файловый менеджер FCKEditor v2.
И после того как FCKeditor стал CKeditor менеджер поменял пару строк кода и стал называться CKfsys.

Что изменилось?

Вот какие изменения я посчитал достаточными:

1. Русифицирован интерфейс.
2. При добавлении папок с русскими именами и закачке файлов с русскими именами производится их транслитерация.
3. У папок пишется их размер.
4. Можно удалять файлы и папки.
5. При закачке картинок на сервер можно изменить их размер.
6. У типа ресурсов Image (Изображения) выводятся их preview-версии.

Функционал в пунктах 4, 5 и 6 можно отключить в config.php.
Для изменения размеров изображений используется imagemagick (качество получше) или если его нет — gd2.

Вот что было и во что все это превратилось — это выглядит так:

Было (стандартный из FCKeditor)

Стало (CKfsys)

Наведи на картинку
и смотри подробнее

Конфигурирование файлового менеджера CKfsys

Требования к серверу:

• в PHP должен быть установлен модуль php_mbstring (обычно у хостеров он стоит);
• для превьюшек — должна быть разрешена команда exec() и стоять утилита convert (imagemagick),
  либо модуль для PHP — gd2.

Добавились следующие настройки:

// Разрешить удаление файлов и папок true/false
$Config['Delete']        = true;

// Делать превьюшки и разрешать изменять размеры при закачке
// требует утилиту imagemagick или библиотеку gd2
// если их нет, то чтобы не выводить в интерфейсе лишние элементы установите в false
$Config['ThumbCreate']   = true; // При закачке можно изменять размеры
$Config['ThumbList']     = true; // Показывать превьюшки
$Config['ThumbListSize'] = 100;  // Размер превьюшки, вписывается в квадрат

И для хранения preview-версий в конце конфигурационного файла задается папка, задайте её и создайте (!!!) соответствующий каталог на сервере:

$Config['AllowedExtensions']['ImageThumb']     = $Config['AllowedExtensions']['Image'];
$Config['DeniedExtensions']['ImageThumb']      = $Config['DeniedExtensions']['Image'];
$Config['FileTypesPath']['ImageThumb']         = $Config['UserFilesPath'] . 'imageThumb/' ;
$Config['FileTypesAbsolutePath']['ImageThumb'] = ($Config['UserFilesAbsolutePath'] == '') ?
                                                 '' : $Config['UserFilesAbsolutePath'].'imageThumb/' ;

То что нужно сконфигурировать в стандарте (если кто не в курсе)

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

Для этого нужно в файле CKFSYS_PATH/connectors/php/config.php определить переменную:

// SECURITY: You must explicitly enable this "connector". (Set it to "true").
// WARNING:  don't just set "$Config['Enabled'] = true ;", you must be sure that only
//           authenticated users can access this file or use some kind of session checking.
$Config['Enabled'] = empty($_SESSION['administrator'])?false:true; // Вот тут укажите свою проверку

И определите папку где будут хранится закачиваемые файлы:

// Path to user files relative to the document root.
$Config['UserFilesPath'] = '/userfiles/'; // Вот тут укажите свою папку, создайте ее с правами 0777

Соединяем CKeditor и CKfsys

Считаем что файловый менеждер настроен, теперь присоединяем его к редактору.
Для этого в файле CKEDITOR_PATH/config.js задаем пути к файловому менеджеру:

// CKFSYS_PATH — путь к файловому менеджеру у вас, чтото типа 
// /path/to/ckeditor/plugins/filemanager, путь указывать от DOCUMENT_ROOT
CKEDITOR.editorConfig = function( config ) {
     config.language = 'ru';
     config.filebrowserImageBrowseUrl = 'CKFSYS_PATH/browser/default/browser.html?Type=Image&Connector=CKFSYS_PATH/connectors/php/connector.php';
     config.filebrowserFileBrowseUrl  = 'CKFSYS_PATH/browser/default/browser.html?Type=File&Connector=CKFSYS_PATH/connectors/php/connector.php';
     config.filebrowserFlashBrowseUrl = 'CKFSYS_PATH/browser/default/browser.html?Type=Flash&Connector=CKFSYS_PATH/connectors/php/connector.php';
     config.filebrowserBrowseUrl      = 'CKFSYS_PATH/browser/default/browser.html?Type=File&Connector=CKFSYS_PATH/connectors/php/connector.php';
}

Пример

<p>Смотрите файловый менеджер... а не редактируйте текст.</p><p>Можно посмотреть тут: <img style="16px; background: url('/data/ckfsys/ckeditor/skins/kama/icons.png') 0 -576px; vertical-align: -3px;" src="/art/0.gif" width="16" height="16" alt="Вставить изображение"/> Вставить изображение &rarr; Посмотреть на сервере.</p>Картинки на сервере периодически сбрасываются на набор по умолчанию.

Лицензия

Редактор распространяется под лицензии GPL.

Ресурсы

• CKeditor download — официальная страница для скачивания редактора.
• ckfsys_filemanager.zip (105 kB) — файловый менеджер CKfsys работает с версией редактора CKeditor 3.4.2, с более свежими может и не работать.

К скрипту имеется 24 комментария

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

Имя: E-mail Сайт: Комментарий: