От автора: на нашем сайте уже публиковался урок по использованию визуального редактора (WYSIWYG) с файловым менеджером. Тогда в качестве файлового менеджера использовалось бесплатное решение AjexFileManager.
В комментариях к уроку был упомянут другой файловый менеджер — KCFinder, который идеально подходит для использования с редактором CKeditor. В данном уроке мы с Вами рассмотрим использование файлового менеджера KCFinder в связке с редактором CKeditor.
Детали учебника
Тема: PHP, JavaScript
Сложность: Средняя
Урок: Видео версия (.mp4)
Время: 00:35:00
Размер архива: 92 Mb
Итак, текущую версию редактора можно скачать с офсайта (//ckeditor.com/download). Текущую версию файлового менеджера можно также взять на офсайте. Также архивы с ними Вы сможете найти в дополнительных материалах к уроку.
Для демонстрации нам потребуется небольшое приложение, которое бы имело некую закрытую (административную) часть. В этой части и будет находиться визуальный редактор. За основу организации доступа к закрытой части взяты материалы урока Создание простой системы авторизации. Ну и, наконец, потребуется любое хранилище данных — у нас это будет БД с одной таблицей и одной статьей. Дамп БД Вы также найдете в дополнительных материалах (файл dump.sql).
Процесс подключения редактора к текстовой области формы крайне прост. Достаточно подключить конфигурационный файл ckeditor.js из папки редактора:
|
1 |
<script src="scripts/ckeditor/ckeditor.js"></script> |
И вызвать для нужного поля подключение редактора:
|
1 2 3 4 |
<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea> <script> CKEDITOR.replace( 'editor1' ); </script> |
Здесь в качестве параметра метода replace() передается ID текстового поля. Если все сделано верно, то мы увидим редактор для текстовой области:
Пока что файловый менеджер нам не доступен и вставить картинку на страницу можно, только указав ее URL:
Процесс интеграции в редактор файлового менеджера также не должен вызвать особых трудностей. Прежде всего, желательно создать папку, куда KCFinder будет загружать файлы. По умолчанию таковой является папка /upload/ в каталоге /kcfinder/. Думаю, загружать картинки в каталог менеджера — не самая лучшая идея, а потому выделим под картинки отдельный каталог /upload/ в корне нашего приложения. Не забудьте, что если Вы работаете на сервере в сети, то, возможно, потребуется выставить на эту папку права для записи.
Для интеграции менеджера в редактор, необходимо в файле config.js редактора прописать корректный путь к файлу browse.php менеджера. Пример подключения можно посмотреть во вкладке Integrate (//kcfinder.sunhater.com/docs/integrate) на офсайте.
В моем случае подключение будет следующим:
|
1 2 3 4 5 6 7 8 9 |
CKEDITOR.editorConfig = function( config ) { // KCFinder config.filebrowserBrowseUrl = '//localhost/wysiwyg/scripts/kcfinder/browse.php?type=files'; config.filebrowserImageBrowseUrl = '//localhost/wysiwyg/scripts/kcfinder/browse.php?type=images'; config.filebrowserFlashBrowseUrl = '//localhost/wysiwyg/scripts/kcfinder/browse.php?type=flash'; config.filebrowserUploadUrl = '//localhost/wysiwyg/scripts/kcfinder/upload.php?type=files'; config.filebrowserImageUploadUrl = '//localhost/wysiwyg/scripts/kcfinder/upload.php?type=images'; config.filebrowserFlashUploadUrl = '//localhost/wysiwyg/scripts/kcfinder/upload.php?type=flash'; // ... |
Заметим, что лучше использовать не относительные, а абсолютные пути. После этого в редакторе в окне работы с картинками должны появиться новые элементы — вкладка «Загрузить» и кнопка «Выбор на сервере»:
Но на этом наша работа пока не завершена. Если сейчас попробовать кликнуть по кнопке «Выбор на сервере», то откроется пустое окно, под которым прячется еще одно окошко с сообщением о том, что мы не можем просматривать содержимое сервера:
Для того, чтобы все же просмотреть это содержимое, необходимо поправить настройки в файле config.php менеджера. В данном конфигурационном файле прописаны всевозможные настройки в массиве $_CONFIG. Нам достаточно изменить значение элемента disabled с true на false, тем самым мы открываем менеджер для всех. Еще одна настройка отвечает за путь к каталогу загружаемых файлов — это элемент uploadURL, значением которого в моем случае будет путь «//localhost/wysiwyg/upload» (это путь к каталогу /upload/, созданному нами ранее).
Теперь мы можем просматривать содержимое папки и закачивать в нее файлы:
Все замечательно, но по нашей задумке пользоваться менеджером может только администратор — мы ведь недаром разместили редактор в закрытой части сайта.
Запомним ссылку на менеджер — она в адресной строке и имеет приблизительно такой вид: «//site/kcfinder/browse.php?type=images». Теперь разлогинемся, нажав ссылку «Выход». На данный момент мы не администраторы и не имеем доступа к редактору. Но попробуем напрямую обратиться к менеджеру… и мы спокойно это сделали. Можно просматривать содержимое, удалять и заливать что-то свое. Это не совсем хорошо и надо бы предоставлять такой доступ только администратору.
В разделе интеграции на офсайте менеджера можно найти и воспользоваться предложенным решением. Итак, перво-наперво, необходимо закрыть доступ к менеджеру для всех, помните, мы открыли его для всех, прописав в настройке disabled значение false файла config.php. Давайте мы вернем значение по умолчанию — true для данной настройки. Теперь менеджер закрыт для всех, в том числе и для администратора.
Теперь давайте откроем его для администратора. В моем случае под администратора в сессии выделяется элемент admin ($_SESSION[‘admin’]). Соответственно, достаточно проверить есть ли искомый элемент в сессии. Если таковой элемент будет, значит к менеджеру обращается администратор, и мы создадим под него в сессии специальный массив ($_SESSION[‘KCFINDER’]), благодаря которому администратор будет иметь доступ к менеджеру. Если же обращение идет не от администратора, то рекомендую удалить из сессии массив $_SESSION[‘KCFINDER’].
Итак, в файле config.php перед объявлением массива $_CONFIG объявим условие:
|
1 2 3 4 5 6 7 |
session_start(); if($_SESSION['admin']){ $_SESSION['KCFINDER'] = array(); $_SESSION['KCFINDER']['disabled'] = false; }else{ unset($_SESSION['KCFINDER']); } |
Теперь доступ к менеджеру будет открыт исключительно для администратора.
Это первый вариант, описанный на офсайте. Второй вариант заключается в ограничении доступа непосредственно к файлу browse.php. Для этого уберем предыдущее условие и вновь откроем менеджер для всех: ‘disabled’ => false.
Теперь обратимся к файлу browse.php и допишем в него в начале проверку:
|
1 2 3 4 |
session_start(); if(!$_SESSION['admin']){ exit(); } |
Собственно, здесь все еще проще — если к файлу обращается не администратор, то просто прерывается дальнейшая работа с этим файлом.
Вот и все. Мы подключили к редактору замечательный файловый менеджер и ограничили доступ к нему. На этом у меня все. Удачи Вам и до новых встреч!
Комментарии (60)