Файловый менеджер KCFinder

Файловый менеджер KCFinder

От автора: на нашем сайте уже публиковался урок по использованию визуального редактора (WYSIWYG) с файловым менеджером. Тогда в качестве файлового менеджера использовалось бесплатное решение AjexFileManager.

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

Детали учебника

Тема: PHP, JavaScript

Сложность: Средняя

Урок: Видео версия (.mp4)

Время: 00:35:00

Размер архива: 92 Mb

скачать исходникискачать урок

Итак, текущую версию редактора можно скачать с офсайта (http://ckeditor.com/download). Текущую версию файлового менеджера можно также взять на офсайте. Также архивы с ними Вы сможете найти в дополнительных материалах к уроку.

Для демонстрации нам потребуется небольшое приложение, которое бы имело некую закрытую (административную) часть. В этой части и будет находиться визуальный редактор. За основу организации доступа к закрытой части взяты материалы урока Создание простой системы авторизации. Ну и, наконец, потребуется любое хранилище данных — у нас это будет БД с одной таблицей и одной статьей. Дамп БД Вы также найдете в дополнительных материалах (файл dump.sql).

Процесс подключения редактора к текстовой области формы крайне прост. Достаточно подключить конфигурационный файл ckeditor.js из папки редактора:

<script src="scripts/ckeditor/ckeditor.js"></script>

И вызвать для нужного поля подключение редактора:

<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 (http://kcfinder.sunhater.com/docs/integrate) на офсайте.

В моем случае подключение будет следующим:

CKEDITOR.editorConfig = function( config ) {
	// KCFinder
	config.filebrowserBrowseUrl = 'http://localhost/wysiwyg/scripts/kcfinder/browse.php?type=files';
	config.filebrowserImageBrowseUrl = 'http://localhost/wysiwyg/scripts/kcfinder/browse.php?type=images';
	config.filebrowserFlashBrowseUrl = 'http://localhost/wysiwyg/scripts/kcfinder/browse.php?type=flash';
	config.filebrowserUploadUrl = 'http://localhost/wysiwyg/scripts/kcfinder/upload.php?type=files';
	config.filebrowserImageUploadUrl = 'http://localhost/wysiwyg/scripts/kcfinder/upload.php?type=images';
	config.filebrowserFlashUploadUrl = 'http://localhost/wysiwyg/scripts/kcfinder/upload.php?type=flash';
	// ...

Заметим, что лучше использовать не относительные, а абсолютные пути. После этого в редакторе в окне работы с картинками должны появиться новые элементы — вкладка «Загрузить» и кнопка «Выбор на сервере»:

Но на этом наша работа пока не завершена. Если сейчас попробовать кликнуть по кнопке «Выбор на сервере», то откроется пустое окно, под которым прячется еще одно окошко с сообщением о том, что мы не можем просматривать содержимое сервера:

Для того, чтобы все же просмотреть это содержимое, необходимо поправить настройки в файле config.php менеджера. В данном конфигурационном файле прописаны всевозможные настройки в массиве $_CONFIG. Нам достаточно изменить значение элемента disabled с true на false, тем самым мы открываем менеджер для всех. Еще одна настройка отвечает за путь к каталогу загружаемых файлов — это элемент uploadURL, значением которого в моем случае будет путь «http://localhost/wysiwyg/upload» (это путь к каталогу /upload/, созданному нами ранее).

Теперь мы можем просматривать содержимое папки и закачивать в нее файлы:

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

Запомним ссылку на менеджер — она в адресной строке и имеет приблизительно такой вид: «http://site/kcfinder/browse.php?type=images». Теперь разлогинемся, нажав ссылку «Выход». На данный момент мы не администраторы и не имеем доступа к редактору. Но попробуем напрямую обратиться к менеджеру… и мы спокойно это сделали. Можно просматривать содержимое, удалять и заливать что-то свое. Это не совсем хорошо и надо бы предоставлять такой доступ только администратору.

В разделе интеграции на офсайте менеджера можно найти и воспользоваться предложенным решением. Итак, перво-наперво, необходимо закрыть доступ к менеджеру для всех, помните, мы открыли его для всех, прописав в настройке disabled значение false файла config.php. Давайте мы вернем значение по умолчанию — true для данной настройки. Теперь менеджер закрыт для всех, в том числе и для администратора.

Теперь давайте откроем его для администратора. В моем случае под администратора в сессии выделяется элемент admin ($_SESSION['admin']). Соответственно, достаточно проверить есть ли искомый элемент в сессии. Если таковой элемент будет, значит к менеджеру обращается администратор, и мы создадим под него в сессии специальный массив ($_SESSION['KCFINDER']), благодаря которому администратор будет иметь доступ к менеджеру. Если же обращение идет не от администратора, то рекомендую удалить из сессии массив $_SESSION['KCFINDER'].

Итак, в файле config.php перед объявлением массива $_CONFIG объявим условие:

session_start();
if($_SESSION['admin']){
    $_SESSION['KCFINDER'] = array();
    $_SESSION['KCFINDER']['disabled'] = false;
}else{
    unset($_SESSION['KCFINDER']);
}

Теперь доступ к менеджеру будет открыт исключительно для администратора.

Это первый вариант, описанный на офсайте. Второй вариант заключается в ограничении доступа непосредственно к файлу browse.php. Для этого уберем предыдущее условие и вновь откроем менеджер для всех: ‘disabled’ => false.

Теперь обратимся к файлу browse.php и допишем в него в начале проверку:

session_start();
if(!$_SESSION['admin']){
  exit();
}

Собственно, здесь все еще проще — если к файлу обращается не администратор, то просто прерывается дальнейшая работа с этим файлом.

Вот и все. Мы подключили к редактору замечательный файловый менеджер и ограничили доступ к нему. На этом у меня все. Удачи Вам и до новых встреч!

Курс по программированию на языке PHP

Изучите PHP с нуля до результата!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

  1. slava

    Спасибо за полезные уроки, всё четко и ясно.
    Андрей, у меня почему то при нажатие на -=ВЫБОР НА СЕРВЕРЕ=- появляется окошко с шаблоном моего сайта со страницей -=Ошибка 404=-
    мой сайт.local/Fubl//scripts/kcfinder/browse.php?type=images&CKEditor=editor1&CKEditorFuncNum=3&langCode=ru

    Путь указывал как Вы и посоветовали -=АБСОЛЮТНЫЙ=-

    Что я не так сделал?

    Заранее спасибо.

    • Андрей Кудлай

      Ошибка 404 однозначно указывает на то, что страницы, к которой идет обращение, на самом деле нет. Если присмотреться к адресу, то это действительно так… вот в этом вот участке пути — /Fubl//scripts/ — затесалось 2 слеша вместо одного между названиями каталогов.

  2. slava

    Спасибо за мобильность.
    Насчет двух слешов, видимо блог не принял код, между двумя слешами стоит код ФУБЛ/PHP ЕХО САЙТЕ/СКРИПТ/….
    и ещё я обратил внимание на то, что редактор для пользовательской части тоже видим.

  3. slava

    Забыл спросить, у вас есть уроки по созданию Интернет-Магазина с нуля своими руками?
    Просто ваши уроки более понятливее, яснее и что главное, четкое разъяснение каждого кода
    Побольше бы таких учителей.

    Спасибо ещё раз.

    • Андрей Кудлай

      Пожалуйста.
      Вот как раз в ближайшее время планируется к запуску целый курс по созданию интернет-магазина :)

  4. Константин

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

    • Андрей Кудлай

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

  5. Pocherk

    Я уже давно пользуюсь связкой
    CKeditor + KCFinder. Один раз настроил и теперь использую во всех проектах. На мой взгляд, самый удачный вариант редактора и файлового менеджера.

    • Руслан

      Цк Эдитором пользуюсь тоже давно, 1 проблема лишь появилась в последним обнавлением около года назад, в дефаул тексте сообщения пишеться или   или в зависимости от браузера. И ещё одна новая проблема которая пришла недавно эта при записи если в тексте встречаются «,’,` то текста при записи могут слететь нашёл 1 решение, но не знаю правильное ли оно.
      htmlspecialchars($_POST['text'], ENT_QUOTES);
      Для записи htmlspecialchars_decode($_POST['text'], ENT_QUOTES);
      Для чтения.
      Подскажите пожалуйста

  6. Руслан

    Спасибо а скин поменять можно там или нет?

  7. Руслан

    Возникла проблема с утановкой данного скрипа. Взял последнию версию ЦК 4.2 и КЦ(тотже что и у вас) но при добавлении скрипт не отображается. ЦК есть а КЦ нету, не с точным урл не с относительным

    • Denis

      *Возникла проблема с утановкой данного скрипа. Взял последнию версию ЦК 4.2 и КЦ(тотже что и у вас) но при добавлении скрипт не отображается. ЦК есть а КЦ нету, не с точным урл не с относительным*

      Тоже в своё время столкнулся с этой проблемой.
      РЕШЕНИЕ.
      Скрипт не отображается из-за запоминания в кеше браузера состояния панельки добавления файла\картинки\видео — БЕЗ кнопок «загрузить с сервера»!
      Соответственно — для 100% отображения результатов изменений в файлах admin.php \ config.js \ config.php \ browse.php — лично я РЕКОМЕНДУЮ обязательно очищать кэш (НЕ куки) перед обновлениями страничек браузера.
      В этом случае видно результат изменений.
      Успеха! ;)

  8. Сергей

    Андрей спасибо за уроки! Подскажите пожалуйста,
    Все установил по уроку но kcfinder работает только в браузере IE а в гугле не хочет.

    • Андрей Кудлай

      Пожалуйста.
      Скорее всего, проблема в том, что Вы используете последние версии редактор CKEditor? Дело в том, что файловый менеджер KCFinder «не дружит» с последними версиями редактора, поэтому рекомендую использовать версию из исходников или скачать с офсайта совместимую версию.
      Если все же используете версию из исходников, а что-то не работает, значит где-то была допущена все же ошибка… тогда нужно искать ее.

      • Сергей

        Спасибо за ответ!Да действительно использую последнюю версию CKEditor.Буду разбираться!

      • Denis

        *Дело в том, что файловый менеджер KCFinder «не дружит» с последними версиями редактора*
        Извините, но вы ошибаетесь :)

        Сутки ковырялся в коде, разбирался что к чему — но удалось настроить связку КФайндер с последней версией СКЕдитор.
        В том числе прописал запрет доступа, как в видео.

        Так же использовал модификацию запрета изменения кода редактором СКЕ:
        (чтобы CKEDITOR не резал скрипты, стили и тег «i,,)
        из #13 от bykoff (17 Февраль 2014 — 03:30)

        В итоге — получившаясвя «связка» достаточно чётко работает!!!
        Встроил к себе в блог, радуюсь :)
        У вас хорошие уроки по тексту и видео.
        Если вы ещё читаете коменты — скажите, вы забросили ваш блог? Или уже я — ошибаюсь и — нет? :)
        Успеха ;)

        • Андрей Кудлай

          Ну если долго мучиться, то всегда что-нибудь получится :)
          Мой комментарий был написан 3 года тому и на тот момент это было действительно так, попытка быстро подружить актуальные на тот момент версию редактора и версию файлового менеджера — ни к чему не привела. Так что я все же прав. Не отрицаю, что поковырявшись некоторое время в проблеме, ее можно было бы решить, но, как по мне, проще все же взять изначально совместимые версии и установить все за 5-10 минут, нежели ковыряться в проблеме, которую можно так и не решить ;)
          Сайт не забросил, уроки и курсы регулярно выходят и на сайте, и на канале, так что оставайтесь с нами :)

  9. Саныч

    А у меня при старте сессии в файле browse.php выдаётся ошибка
    A session had already been started — ignored session_start
    Ругается на то, что сессия запущена, но если я убираю функцию session_start тогда вылезает ошибка Undefined variable: _SESSION.
    Возникает вопрос. Как быть в этом случаи?

    • Андрей Кудлай

      Для решения вопросов, связанных с кодом, у нас есть форум.

      • Саныч

        Что вы за люди?!) Чуть, что сразу на форум. Я уже сам разобрался. Сессия стартовала ещё в файле upload.php на 140-ой строке. Поэтому и вылезала ошибка.

        • Андрей Кудлай

          Да нормальные мы люди) На форуме ведь можно и файлы прикрепить, и код в нормальном виде выложить, и скриншот приложить… в общем, все нормальные условия для того, чтобы решить проблему… для этого мы форум и создавали… и все это очень сложно сделать в рамках комментариев на сайте.

          • Саныч

            Ясно. Извините, если, что не так.

          • Андрей Кудлай

            Да все нормально ;)

          • Саныч

            А вы в визуальном редакторе ckeditor хорошо разбираетесь?

          • Андрей Кудлай

            Фактически лишь использовал его в качестве пользователя… в качестве разработчика с ним практически не знаком.

          • Саныч

            Ясно. Но я скажу штука мудрёная сразу не разберёшься. Да кстати. Забыл сказать вам спасибо за урок. Я ведь долго не мог понять почему всё время алерт выдавал сообщение о том, что у меня нет прав. Благодаря вашему уроку теперь файлменеджер работает. Большое вам спасибо за это!

          • Андрей Кудлай

            Пожалуйста :)

  10. Сергей

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

    • Андрей Кудлай

      Добрый день.
      Я так понимаю, что нужно позволить загружать, но запретить удалять? Если так, то нужно использовать механизм ролей (скорее всего, писать собственный).

      • Сергей

        У Вас есть какие нибудь уроки где расказываются про такие вещи.

        • Андрей Кудлай

          Да, в общем-то, масса таких уроков… это уроки, связанные с регистрацией, авторизацией, работой с БД и просто уроки по PHP… проще говоря, для того, чтобы решить эту задачу, нужны знания PHP.

  11. Сергей

    В хром почему-то виснет вкладка, если открыть всплывающее окно с ифреймом c kcfinder’om. Причем если просто перейти по пути который в теге — все нормально открывается и с файлами можно работать. Не пойму в чем дело, получается из-за соображений безопасности что-ли. Как можно победить эту проблему? Зараннее спасибо.

  12. bykoff

    Андрей, добрый день!
    Спасибо за урок. Может быть вы знаете, как отучить CKeditor удалять стили из редактируемого текста?

    • Андрей Кудлай

      Добрый день.
      Эммм… не совсем понял о чем речь. Давайте Вы создадите тему на форуме и прикрепите скрины, поясняющие ситуацию, или каким либо иным способ конкретизируете вопрос.

      • bykoff

        Попробую конкретизировать, если не поможет, пойду на форум.
        В область редактора загружается контент, которому даны стили (присвоены классы). Как только все загрузилось CKeditor удаляет классы. Например было так после загрузки в CKeditor становится вот так.

        • Андрей Кудлай

          Вот то, о чем я говорил :) и предлагал форум… ну не предназначены комментарии для решения подобных проблем… ни код нормально выложить, ни картинку прикрепить… если я правильно понял вопрос, то на форуме уже поднималась эта тема, вот здесь.

  13. Никита

    Отилчная статья! Пользовался старой версией fckeditor, сейчас обновился до той, что приведена выше. Работать намного приятней, но возникла проблема с настройкой панелей, она поменялась, по сравнению со старыми версиями. А в документации для 4х версий чего то не могу разобраться(
    Хочется добавить выравнивание текста, верхние, нижние индексы, размеры и цвета шрифта. Но никак не могу найти, как это должно называться…
    В стандартной версии, тулбары прописываются в config.js, но их там мало, хотел названия перекопирвоать из полной, а там вообще пусто))

  14. Александр

    Андрей, спасибо вам за уроки.
    Но у меня есть вопрос, а точнее проблема с редактором CKEditor или kcfinder (сам не пойму). Пока сайт был на локальной машине, все было хорошо. Как только выложил на хостинге, картинки которые были добавлены через CKEditor, перестали отображаться, если перейти по их пути то мы увидим «ошибку 500″. Через файловый менеджер картинки добавляются, но как только мы их вставляем в редактор, то они опять пропадают (ошибка 500). В чем может быть проблема? Надеюсь на Вашу помощь! Вот пример странице на которой должна выводиться картинка cad4art[точка]ru/article/id19.

  15. Александр

    Спасибо! Уже разобрался. Дело в том что в папке upload есть файл .htaccess в нем надо закомментировать #Options -ExecCGI

    • Андрей Кудлай

      Отлично, что получилось разобраться с проблемой самостоятельно! :)
      Действительно, ошибка 500 — это внутренняя ошибка сервера, которую вызывают некорректные настройки сервера или некорректные команды в файле htaccess, переопределяющие настройки. Насколько я понимаю, команда, которую вы закомментировали, запрещает выполнение скриптов из данной папки.

  16. Олеся

    Большое спасибо! Как всегда простое объяснение и отличный результат.

  17. Alexey

    Что за фиговый денвер, ошибка на функцию header(«Location: enter.php»);
    И в самом файловом менеджере ошибок дофига. чтоб заблокировали этот денвер.

  18. Дмитрий

    Добрый день.
    С последним обновлением вся работа поменялась.
    Потратив некоторое врмя, я вся-таки подружил ckeditor и ckfinder, но сейчас возникает ошибка «Ошибка при разборе XML-ответа сервера.» Чего с этим делать?

    • Андрей Кудлай

      Здравствуйте.
      С новыми версиями работать пока не приходилось и с такой ошибкой не сталкивался. Попробуйте поискать ответ на офсайте или используйте версии из урока.

      • Alexey

        Здравствуйте!!!
        с новой версией ckeditor и kcfinder данный способ не работает, но к счастью я нашел новый способ установить kcfinder
        Для этого добавляем в файл admin.php этот код
        CKEDITOR.replace( ‘editor1′, {
        filebrowserBrowseUrl: ‘/scripts/kcfinder/browse.php’,
        filebrowserUploadUrl: ‘/scripts/kcfinder/upload.php’
        });

  19. zoomwo

    Отличная статья, как раз мой убогий сайт нуждается в этом.

  20. Александр Efeligne

    Благодарю за данный урок. Очень помог данный курс. Всё доступно разъяснили =)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree