Yii2 ckeditor с загрузкой изображений

Yii2 ckeditor с загрузкой изображений

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы с вами продолжим работать с виджетом для Yii2 CKEditor и добавим в него файловый менеджер ELFinder, благодаря которому сможем загружать изображения и вставлять их в контент.

Напомню, в одной из предыдущих статей мы установили визуальный редактор CKEditor, который позволяет добавлять контент на сайт пользователям, не имеющим представления о верстке. Однако, по умолчанию данный редактор не позволяет загружать картинки, можно только вставлять ссылки на уже загруженные изображения.

Yii2 ckeditor с загрузкой изображений

Давайте исправим этот момент и установим файловый менеджер ELFinder. Итак, перейдем на страницу данного расширения на GitHub, где можно ознакомиться с инструкцией по его установке и настройке. Для его установки нам потребуется выполнить в Composer следующую команду:

composer require --prefer-dist mihaildev/yii2-elfinder "*"

Yii2 ckeditor с загрузкой изображений

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее

Расширение установлено. Теперь подключим и настроим его согласно инструкции. Для начала откроем файл config\web.php и вставим в него следующий код:

'controllerMap' => [
 'elfinder' => [
 'class' => 'mihaildev\elfinder\PathController',
 'access' => ['@'],
 'root' => [
 'path' => 'files',
 'name' => 'Files'
 ],
 ]
],

Yii2 ckeditor с загрузкой изображений

Теперь добавим предлагаемый код в представление. Поскольку мы используем ELFinder совместно с расширением mihaildev/yii2-ckeditor, используем соответствующий вариант из документации:

Yii2 ckeditor с загрузкой изображений

Вместо кода подключенного ранее редактора, используем теперь следующий код:

<?=
$form->field($form_model, 'text')->widget(CKEditor::className(), [
  'editorOptions' => ElFinder::ckeditorOptions('elfinder',[]),
]);
?>

Yii2 ckeditor с загрузкой изображений

Теперь вернемся к настройкам – файл config\web.php – и укажем папку, в которую будут сохраняться картинки. Также укажем уровень доступа, заменив значение access с @ (доступ для авторизованных пользователей) на ? (доступ для гостей):

Yii2 ckeditor с загрузкой изображений

В папке web не забудьте создать папки upload\global, которые мы указали в конфигурации path для сохранения картинок:

Yii2 ckeditor с загрузкой изображений

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

Yii2 ckeditor с загрузкой изображений

Клик по кнопке откроет окно загрузки изображений:

Yii2 ckeditor с загрузкой изображений

Собственно, все – теперь мы можем загружать картинки и добавлять их в наши статьи.

А на сегодня все. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки:

Похожие статьи:

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

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

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

Ваш 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