Від автора: вітаю вас, друзі. Ми продовжуємо цикл статей, присвячених знайомству з фреймворком Yii2. У цій статті ми з вами познайомимося з віджетом для Yii2 CKEditor. Дане розширення дозволяє додати візуальний редактор для текстової області форми. Почнемо.
Коли ми створюємо сайт, нам швидше за все, необхідна буде адміністраторська його частина. З адмінської частини адміністратор може керувати контентом сайту: додавати і редагувати статті у блозі, товари в інтернет-магазині і т. д. Ну а щоб недосвідченому користувачеві було простіше оформляти текстовий контент, завантажувати зображення і керувати вмістом, непогано було б надати йому зручний візуальний редактор.
Одним з популярних варіантів візуальних редакторів є CKEditor. Працювати з ним може будь-який користувач, знайомий з офісним редактором Word — нічого складного і все інтуїтивно зрозуміло. Ми можемо спробувати підключити даний плагін самостійно, а можна скористатися вже готовим популярним розширенням для нашого фреймворка. Так і поступимо.
Для початку давайте підготуємо форму. В одній з попередніх статей ми створювали найпростішу форму з полями для введення імені та email.
Давайте додамо до цієї форми текстову область. Для цього відкриємо модель форми і додамо властивість $text і правило валідації для нього:
class TestForm extends Model
{
public $name;
public $email;
public $text;
public function rules()
{
return [
[[‘name’, ’email’], ‘required’],
[‘text’, ‘trim’],
[’email’, ’email’],
];
}
}
Тепер звернемося до подання та сформуємо потрібний нам тип поля:
field($form_model, ‘text’)->textarea([‘rows’ => 5])?>
Оновимо сторінку і подивимося на результат:
Добре, поле ми додали. Наступне завдання — встановити вибране розширення і скористатися його віджетом ckeditor. На сторінці розширення ми можемо знайти необхідну команду для встановлення візуального редактора через Composer. Давайте використаємо її:
composer require –prefer-dist mihaildev/yii2-ckeditor “*”
І дочекаємося закінчення процесу установки.
Тепер необхідно викликати widget. Приклади використання можна знайти там же, в документації.
field($form_model, ‘text’)->widget(CKEditor::className(),[
‘editorOptions’ => [
‘preset’ => ‘full’, //розроблені стандартні налаштування basic, standard, full дану можливість не обов’язково використовувати
‘inline’ => false, //за замовчуванням false
],
]); ?>
Якщо ми ніде не помилилися, тоді після оновлення сторінки замість «голого» текстового поля ми побачимо гарний редактор CKEditor.
Власне, все. Ми встановили потрібне нам розширення і їм вже можна користуватися. Можливо вам захочеться додатково встановити функцію upload image, тобто завантаження картинок. В цьому випадку додатково можна встановити розширення від того ж автора.
А на сьогодні все. Більше про фреймворку ви можете дізнатися з наших безкоштовних або платних уроків. Також створення найпростішого блогу на Yii2 можна подивитися в цьому циклі уроків.
