Yii2 ckeditor

Yii2 ckeditor

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

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

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

Для начала давайте подготовим форму. В одной из предыдущих статей мы создавали простейшую форму с полями для ввода имени и email.

Yii2 ckeditor

Давайте добавим к этой форме текстовую область. Для этого откроем модель формы и добавим свойство $text и правило валидации для него:

class TestForm extends Model
{

    public $name;
    public $email;
    public $text;

    public function rules()
    {
        return [
            [['name', 'email'], 'required'],
            ['text', 'trim'],
            ['email', 'email'],
        ];
    }

}

Yii2 ckeditor

Теперь обратимся к представлению и сформируем нужный нам тип поля:

<?= $form->field($form_model, 'text')->textarea(['rows' => 5])?>

Yii2 ckeditor

Обновим страницу и посмотрим на результат:

Yii2 ckeditor

Хорошо, поле мы добавили. Следующая задача — установить выбранное расширение и воспользоваться его виджетом ckeditor. На странице расширение мы можем найти необходимую команду для установки визуального редактора через Composer. Давайте используем ее:

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

И дождемся окончания процесса установки.

Yii2 ckeditor

Теперь необходимо вызвать widget. Примеры использования можно найти там же, в документации.

<?= $form->field($form_model, 'text')->widget(CKEditor::className(),[
    'editorOptions' => [
        'preset' => 'full', //разработанны стандартные настройки basic, standard, full данную возможность не обязательно использовать
        'inline' => false, //по умолчанию false
    ],
]); ?>

Yii2 ckeditor

Если мы нигде не ошиблись, тогда после обновления страницы вместо «голого» текстового поля мы увидим красивый редактор CKEditor.

Yii2 ckeditor

Собственно, все. Мы установили нужное нам расширение и им уже можно пользоваться. Возможно вам захочется дополнительно установить функцию upload image, т.е. загрузки картинок. В этом случае дополнительно можно установить расширение от того же автора.

А на сегодня все. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на 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