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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

  1. Артем

    А как быть в случае с шаблоном Advanced?

    Мне нужно чтобы изображения загружались из backend в папку frontend/web/uploads/
    Ссылки в виде @frontend не работают там.

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

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

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

Я не робот.

Spam Protection by WP-SpamFree