Установка и настройка Elfinder

Elfinder — популярный среди вебмастеров файловый менеджер с веб-интерфейсом от российских разработчиков. Он предназначен для управления файлами на хостингах и веб-сайтах.

Elfinder написан на JavaScript, а серверная часть на php и предоставляет очень большой ряд возможностей как для файлового менеджера в веб-браузере:

  • Просмотр и редактирование текстовых файлов;
  • Создание и распаковка архивов tar, zip, gpzip, 7z;
  • Полностью поддерживаются стандартные операции с файлами — создание, удаление, перемещение, копирование;
  • Превью для картинок и разные иконки для типов файлов;
  • Сортировка файлов;
  • Поддержка работы с файлами по FTP так и в локальной файловой системе;
  • Вывод информации о файлах;
  • Возможность реализовать виртуальную файловую систему в mysql;

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

В интернете полным-полно инструкций по установке elfinder в качестве модуля durpal, yii, wordpress и т д. Но мне нужна была именно чистая установка elfinder, без какой-либо интеграции. После нескольких часов изучения зарубежных сайтов и официальной документации решение все-таки было найдено. В этой статье будет рассмотрена чистая установка и настройка файлового менеджера elfinder.

Установка elfinder на хостинг

Я буду писать с расчетом на то что у вас есть ssh доступ к хостингу, но все можно сделать и через ftp, действия аналогичны, но только по ssh намного удобнее. У программы есть репозиторий на Github там же можно скачать архив с нужной версией или исходники. На данный момент самая последняя стабильная версия — 2.0. Ее можно загрузить по следующей ссылке:

Теперь можно заняться интерфейсом. Интерфейс настраивается путем передачи опций при создании экземпляра Elfinder в Javascript. Откройте файл elfinder.html и приведите код запуска программы к такому виду:

<!— elFinder initialization (REQUIRED) —>
<script type=»text/javascript» charset=»utf-8″>
$().ready(function() <
var elf = $(‘#elfinder’).elfinder( <
url : ‘php/connector.php’, // connector URL (REQUIRED)
lang : ‘ru’,
height : ‘600’
>).elfinder(‘instance’);
>);
</script>

Здесь lang: ‘ru’ включает русский язык интерфейса, а параметр height указывает длину окна программы. Не забудьте поставить кому после строчки url : ‘php/connector.php’ иначе будет ошибка.

Осталось самое интересное — защита доступа к файлам паролем. Для запоминания пользователей будем использовать переменную $_SESSION, а логин и пароль будем проверять прямо в скрипте. Писать самому код было лень, поэтому взял с одного англоязычного ресурса и чуть подкорректировал.

Сначала переименовываем elfinder.html в elfinder.php:

mv elfinder/elfinder.html elfinder/elfinder.php

Теперь добавим следующий код для авторизации и проверки пользователей в начало файла:

[sourcecode]$ nano elfinder/elfinder.php

if(isset($_GET[‘logout’])) <
session_destroy();
header(‘Location: elfinder.php’);
exit();
>

if(isset($_POST[‘submit’])) <
if($_POST[‘username’] ==’admin’ && $_POST[‘password’] == ‘password’) <
$_SESSION[‘authorized’] = true;
header(‘Location: elfinder.php’);
exit();
>
>

<form action=» method=’post’ autocomplete=’off’>
<p>Username: <input type=»text» name=»username» value=»»></p>
<p>Password: <input type=»password» name=»password» value=»»></p>
<p><input type=»submit» name=»submit» value=»Login»></p>
</form>

А это нужно дописать в конец файла после стандартного кода:

Еще можно добавить строчку в тег body для удаления сессии:

[sourcecode]<!— Element where elFinder will be created (REQUIRED) —>
<div ></div>
<p><a href=’?logout’>Logout</a></p>[/sourcecode]

С этим все, теперь всех кто попытается получить доступ к файлам остановит пароль:

Вводить каждый раз имя скрипта бессмысленно и неудобно, сделаем чтобы elfinder.php открывался по умолчанию с помощью .htaccess:

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

Выводы

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

Источник



Установка и настройка ckeditor в Drupal 7

В Drupal 7, как и в шестой версии нет встроенного визуального редактора.

Руководство пользователя: как установить и настроить редактор ckeditor в друпал 7. Загрузка изображений с Elfinder.

В друпал 7, как и в шестой версии, нам нужно установить редактор. Конечно, можно этого не делать и писать тексты, видя только код. Но мне нравятся визуальные редакторы. Напомню, что установку и настройку для друпал 6 мы изучили в уроке 2: «FCKeditor — WYSIWYG редактор. Установка и настройка fckeditor в друпал.»

Кроме этого:  Как разбить диск для установки Linux

Сегодня мы рассмотрим рабочую связку cms с редактором.
drupal 7.17
CKEditor — WYSIWYG HTML editor 7.x-1.11
CKEditor 4.0
elFinder file manager 7.x-0.7
скрипт elFinder — elfinder-1.2

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

Как установить WYSIWYG редактор CKEditor на последнюю версию CMS Drupal 7.17

CKEditor – это гибкий и удобный редактор. Его интерфейс напоминает ворд.
Сначала устанавливаем скрипт редактора, потом сам модуль. Именно модуль подключит его к сайту.
Примечание.
Я указываю конкретные версии на момент написания статьи.

1. Скачать модуль ]]> https://drupal.org/project/ckeditor ]]>
Архив распакуйте в папку site/all/modules. Весь путь выглядит так: site/all/modules/ckeditor

2. Скачать редактор CKEditor 4.0 ]]> https://ckeditor.com/download ]]>
Для файлов редактора нужно создать папку libraries в site/all/
Путь распаковки архива будет таким: site/all/libraries/ckeditor

На странице модулей включаем, а затем настраиваем.
Идем «Конфигурация — CKEditor — Глобальный профиль CKEditor – Изменить». Здесь нужно проверить запись в поле «Путь к CKEditor» — должно быть %l/ckeditor. Эта запись показывает, что редактор находится в папке libraries.

Все. Вы установили CKEditor и он должен работать. Для проверки попробуйте открыть страницу создания нового материала. Теперь вместо одного большого поля для ввода вы увидите привычный визуальный редактор.

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

Настройка профилей редактора CKEditor

1 шаг. Настройка профиля Advanced в редакторе CKEditor.
Advanced (расширенный, с загрузкой изображений и т. д.)
Идем «Управление > конфигурация > ckeditor — admin/config/content/ckeditor
Настроим профиль Advanced, кликаем ссылку «изменить» напротив профиля Advanced.
Внешний вид редактора (Editor appearance):
Выбираем колор.

Выбрать цвет интерфейса ckeditor

Перетаскиваем нужные кнопочки.

Язык выбираем русский.

File browser settings
Выбираем по своему вкусу файловый менеджер, ниже по тексту есть установка и настройка файлового менеджера для друпал 7 – Elfinder.

Elfinder - файловый менеджер для удобной загрузки файлов.

2 шаг. Настройка профиля Full в редакторе ckeditor
Идем «Управление — конфигурация – ckeditor» — admin/config/content/ckeditor
Оставить настройки можно по умолчанию, выбрать русский язык.

Самый простой вариант использовать Full (полный) и Advanced (расширенный) — для зарегистрированных, также ваши вариации. Создать для анонимных пользователей профиль Plain, где отметить автоматическое изменение html текста в простой формат.

профиль Plain

Немного из обзора друпал 7, такой мини положительный отзыв.
В семерке по умолчанию есть поле для загрузки рисунков. Очень полезная фишка. Каждому материалу можно присвоить картинку – своеобразный логотип. В анонсе эта картинка автоматически уменьшится.

Отзыв о друпал 7

Какие проблемы встречаются при работе с редактором

CKeditor показывает не все кнопки

Для этого проверьте, какую версию вы скачали на странице https://ckeditor.com/download

  • В пакете Basic Package — кнопок мало.
  • Standard Package — их больше.
  • Полный набор в пакете Full Package — скачивайте его, если хотите задействовать максимум.

Установка и настройка файлового менеджера Elfinder для Drupal 7

Связка из редактора и файлового менеджера сделают вашу работу наиболее приятной. Вы сможете в любое место вставить изображение с сервера или с компьютера. Присвоить ему нужные атрибуты, альтернативное описание. К сожалению и его нужно устанавливать.
Файловый менеджер CKEditor загрузит не только картинки, но и другие файлы.
Как и с редактором, нужно скачать модуль и скрипт.

Распаковать архив и поместить файлы в папку site/all/modules/elfinder

Из последних версий подошло elfinder-1.2.
Затем распакуем архив и поместим файлы в папку site/all/libraries/elfinder
Здесь есть небольшая особенность, папку нужно назвать elfinder.

  1. Настраиваем. Для этого идем admin/config/elfinder – «конфигурация – модули – elFinder – настроить».

В «Root directory» оставляем выбор за «Use system defaults» — по умолчанию в друпал.

Умолчания друпал 7

Установки по умолчанию admin/config/media/file-system:

Где найти в друпал настройку пути сохранения файлов

На страничке «Содержимое» — admin/content, вы увидите новую вкладку «Файлы». Теперь достаточно по ней кликнуть и вы увидите интерфейс файлового менеджера.

Окно файлового менеджера

И последний шаг – это объединение редактора с файловым менеджером в один функциональный инструмент.
Выше я уже описала настройку профилей редактора.

Повторюсь:
Выбираем в File browser type — elFinder. При желании здесь же можно поменять папку для загрузки файлов.

Кроме этого:  Шевроле авео зеркала с подогревом с установкой

Теперь все должно работать, а я никак не пойму, почему этого нет в ядре друпал? Вместо этого несколько вариантов редакторов на любой вкус. Что слишком хорошо. 😉

Загрузка файлов в друпал 7

Новая рабочая связка

drupal 7.21
CKEditor — WYSIWYG HTML editor 7.x 1.13
CKEditor — ckeditor_4.1_standard
elFinder file manager 7.x-0.8
скрипт elFinder — elfinder-1.2

Появляется глюк с добавлением новых пустот (<p> </p>) при каждом редактировании.

Выявлено, что глюк появляется при вставке тизера друпал. Если в статье не отделять анонс, то глюка нет.

Причина в том, что по умолчанию размер анонса уже настроен в типе материала. Получается двойное использование отделения анонса: ручное и автоматическое.

Путь к настройке показа анонса:

Совет. Следует при настройке внешнего вида визуального редактора убрать кнопочку тизер-друпал в обоих профилях .

Статьи для изучения drupal:

Выбор версии и установка drupal — как русифицировать друпал и модули к нему.

Источник

Обзор файлового менеджера для сайта elFinder

Файловых менеджеров для сайта существует множество, но не все они бесплатны, и не все они хороши. Одним из лучших файловых менеджеров по мнению Pedanto является elFinder. Кроме того что он бесплатен, так еще и функций у него полный комплект.

Интерфейс файлового менеджера elFinder

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

К недостаткам файлового менеджера можно отнести невозможность изменить высоту главного окна, она фиксирована 400px.

Интерфейс elFinder

Встраивание в визуальный редактор

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

Кстати это изображение выше, было загружено именно таким образом. Но кроме этого во всплывающем окне файлового менеджера для него была создана отдельная папка. Также изображение было скопировано и уменьшено, для превью версии. И все эти манипуляции были произведены во всплывающем окне elFinder во время оформления этой статьи.

Основные применения файлового менеджера для сайта

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

Применения elFinder

Возможности elFinder

  • Создание и удаление папок и подпапок
  • Загрузка файлов любого типа
  • Возможность скачивать с сайта загруженные файлы
  • Быстрый просмотр
  • Копирование и перемещение файлов
  • Архивация и разархивирование содержимого
  • Переименовывание файлов
  • Редактор изображений (Кадрирование, изменение размера, поворот изображения)
  • В последних версиях elFinder появилась возможность загружать файлы в облачное хранилище

Уязвимости elFinder

Как и в любом стороннем скрипте в elFinder есть уязвимости, которые могут позволить злоумышленникам получить доступ к вашей файловой системе, загрузить в нее вредоносный код и испортить ваш сайт. Одна такая уязвимость, позволяет получить доступ к редактору, любому, кто знает в какой папке сайта он расположен. Дело в том что файл elfinder.html не защищен от внешнего доступа. Студия Pedanto исправила эту проблему для всех наших сайтов включив опцию зашиты в конфигурационный файл connector.minimal.php (connector.php в старых версиях). Достаточно дописать в нем скрипт проверки авторизации администратора в самом верху.

Например:

Ну и ниже код коннектора. Это только пример реализации, все зависит от используемой CMS.

Дополнительные меры зашиты для сайта

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

Кроме этого:  Как снять передний бампер на тойота королла 150 8212 рассматриваем развернуто

Источник

Установка і настройка elfinder

Elfinder — популярний серед вебмайстрів файловий менеджер з веб-інтерфейсом від російських розробників. Він призначений для управління файлами на хостингах і веб-сайтах.

Elfinder написаний на jаvascript, а серверна частина на php і надає дуже великий ряд можливостей як для файлового менеджера в веб-браузері:

  • Перегляд і редагування текстових файлів;
  • Створення та розпакування архівів tar, zip, gpzip, 7z;
  • Повністю підтримуються стандартні операції з файлами — створення, видалення, переміщення, копіювання;
  • Прев`ю для картинок і різні іконки для типів файлів;
  • Сортування файлів;
  • Підтримка роботи з файлами по FTP так і в локальній файловій системі;
  • Виведення інформації про файлах;
  • Можливість реалізувати віртуальну файлову систему в mysql;

Мені Elfinder сподобався коли він був встановлений як стандартний файловий менеджер на хостингу, яким я тоді користувався. Але з часом хостинг довелося змінити. Тоді я і задався питанням як встановити цю чудову програму на новий хостинг.

В інтернеті повнісінько інструкцій по установці elfinder як модуль durpal, yii, wordpress і т д. Але мені потрібна була саме чиста установка elfinder, без будь-якої інтеграції. Після декількох годин вивчення зарубіжних сайтів і офіційної документації рішення все-таки було знайдено. У цій статті буде розглянута чиста установка і настройка файлового менеджера elfinder.

Установка elfinder на хостинг

Я буду писати з розрахунком на те що у вас є ssh доступ до хостингу, але все можна зробити і через ftp, дії аналогічні, але тільки по ssh набагато зручніше. У програми є репозиторій на Github там же можна скачати архів з потрібною версією або вихідні. На даний момент остання стабільна версія — 2.0. Її можна завантажити за наступним посиланням: https://github.com/Studio-42/elFinder#downloads або виконавши команду:

Відео: elfinder + tinymce

$ Tar xvzf elfinder-2.0-rc1.tar.gz

$ Mv elfinder-2.0-rc1 elfinder

Програма встановлена ​​і доступна за адресою:

$ Nano elfinder / php / connector.php

[Sourcecode] $ opts = array (

.
`Roots` = gt; array (
array (
`Driver` = gt; `LocalFileSystem`,
`Path` = gt; `../`,
`URL` = gt; `Http: // localhost /`
)
)
) — [/ sourcecode]

За умовчанням як кореня використовується підкаталог files, тому ми і не побачили ніяких файлів при першому запуску. Встановимо в якості кореня папку, в якій знаходиться elfinder, Тобто нашу public_html, адреса батьківської папки записується як «..». Тепер нам залишається тільки замінити значення параметра path як показано в прикладі.

Відео: Auto Exploit elFinder

Ось тепер правильно, є файли:

elfinder1

Тепер можна зайнятися інтерфейсом. Інтерфейс налаштовується шляхом передачі опцій при створенні екземпляра Elfinder в jаvascript. Відкрийте файл elfinder.html і приведіть код запуску програми до такого виду:

тут lang: `ru` включає російську мову інтерфейсу, а параметр height вказує довжину вікна програми. Не забудьте поставити кому після рядка url: `php / connector.php` інакше нічого не вийде.

Залишилося найцікавіше — захист доступу до файлів паролем. Для запам`ятовування користувачів будемо використовувати змінну $ _SESSION, а логін і пароль будемо перевіряти прямо в скрипті. Писати самому код було лінь, тому взяв з одного англомовного ресурсу і трохи підкоригував.

Спочатку перейменовуємо elfinder.html в elfinder.php:

if (isset ($ _ GET [ `logout`])) <
session_destroy ();
header ( `Location: elfinder.php`);
exit ();
>

Відео: Yii2 — 14. Файловий менеджер в WYSIWYG-редакторі

if (! isset ($ _ SESSION [ `authorized`])) <

if (isset ($ _ POST [ `submit`])) <
if ($ _ POST [ `username`] == `admin` $ _POST [ `password`] == `password`) <
$ _SESSION [ `authorized`] = true;
header ( `Location: elfinder.php`);
exit ();
>
>

А це потрібно дописати в кінець файлу після стандартного коду:

[Sourcecode] lt;? Php>? Gt; [/ sourcecode]

Ще можна додати рядок в тег body для видалення сесії:

З цим все, тепер всіх хто спробує отримати доступ до файлів зупинить пароль:

elfinder1

Щоразу ім`я скрипта безглуздо і незручно, зробимо щоб elfinder.php відкривався за замовчуванням за допомогою .htaccess:

$ «Nano elfinder / .htaccesshttp: // адрес_сайта / elfinder

висновки

Ми розглянули як виконується установка і настройка elfinder. Якщо після прочитання статті у вас з`явилися пропозиції, зауваження або питання, пишіть коментарі!

Источник