От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы с вами познакомимся с виджетом для Yii2 CKEditor. Данное расширение позволяет добавить визуальный редактор для текстовой области формы. Начнем.
Когда мы создаем сайт, нам скорее всего, необходима будет администраторская его часть. Из админской части администратор может управлять контентом сайта: добавлять и редактировать статьи в блоге, товары в интернет-магазине и т.д. Ну а чтобы неискушенному пользователю было проще оформлять текстовый контент, загружать изображения и управлять содержимым, неплохо было бы предоставить ему удобный визуальный редактор.
Одним из популярных вариантов визуальных редакторов является CKEditor. Работать с ним может любой пользователь, знакомый с офисным редактором Word — ничего сложного и все интуитивно понятно. Мы можем попробовать подключить данный плагин самостоятельно, а можем воспользоваться уже готовым популярным расширением для нашего фреймворка. Так и поступим.
Для начала давайте подготовим форму. В одной из предыдущих статей мы создавали простейшую форму с полями для ввода имени и email.
Давайте добавим к этой форме текстовую область. Для этого откроем модель формы и добавим свойство $text и правило валидации для него:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class TestForm extends Model { public $name; public $email; public $text; public function rules() { return [ [['name', 'email'], 'required'], ['text', 'trim'], ['email', 'email'], ]; } } |
Теперь обратимся к представлению и сформируем нужный нам тип поля:
|
1 |
<?= $form->field($form_model, 'text')->textarea(['rows' => 5])?> |
Обновим страницу и посмотрим на результат:
Хорошо, поле мы добавили. Следующая задача — установить выбранное расширение и воспользоваться его виджетом ckeditor. На странице расширение мы можем найти необходимую команду для установки визуального редактора через Composer. Давайте используем ее:
|
1 |
composer require --prefer-dist mihaildev/yii2-ckeditor "*" |
И дождемся окончания процесса установки.
Теперь необходимо вызвать widget. Примеры использования можно найти там же, в документации.
|
1 2 3 4 5 6 |
<?= $form->field($form_model, 'text')->widget(CKEditor::className(),[ 'editorOptions' => [ 'preset' => 'full', //разработанны стандартные настройки basic, standard, full данную возможность не обязательно использовать 'inline' => false, //по умолчанию false ], ]); ?> |
Если мы нигде не ошиблись, тогда после обновления страницы вместо «голого» текстового поля мы увидим красивый редактор CKEditor.
Собственно, все. Мы установили нужное нам расширение и им уже можно пользоваться. Возможно вам захочется дополнительно установить функцию upload image, т.е. загрузки картинок. В этом случае дополнительно можно установить расширение от того же автора.
А на сегодня все. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.
Комментарии (8)