Yii2 ckeditor

22

Від автора: вітаю вас, друзі. Ми продовжуємо цикл статей, присвячених знайомству з фреймворком 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

Тепер звернемося до подання та сформуємо потрібний нам тип поля:

field($form_model, ‘text’)->textarea([‘rows’ => 5])?>

Yii2 ckeditor

Оновимо сторінку і подивимося на результат:

Yii2 ckeditor

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

composer require —prefer-dist mihaildev/yii2-ckeditor «*»

І дочекаємося закінчення процесу установки.

Yii2 ckeditor

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

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

Yii2 ckeditor

Якщо ми ніде не помилилися, тоді після оновлення сторінки замість «голого» текстового поля ми побачимо гарний редактор CKEditor.

Yii2 ckeditor

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

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