Yii2 ckeditor

Yii2 ckeditor

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

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

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

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

Yii2 ckeditor

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

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

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

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

Yii2 ckeditor

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

Yii2 ckeditor

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

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

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

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

Yii2 ckeditor

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

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

Yii2 ckeditor

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

Yii2 ckeditor

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

Yii2 ckeditor

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

  1. Алина

    Столкнулась с такой проблемой. У меня установлен сервер на флешке, чтобы была возможность работать на разных компьютерах, на всех компьютерах буква у порта usb разная. Установила ckeditor, работает только на том компе, с которого и устанавливала, на всех других не находит файлы, проблема решилась переименованием буквы диска. То есть ckeditor где-то использует абсолютный адрес, а не относительный. Подскажите, пожалуйста, как можно поменять адресацию, чтобы все работало.

    • Андрей Кудлай

      Несколько раз переносил Yii и другие сайты с редактором — с такой проблемой не сталкивался. Мне кажется, что проблема в чем-то другом. Но можете проверить, запустив поиск по файлам, указав в качестве поиска букву диска и первую папку. Вряд ли поиск даст результат, но если все же даст, тогда найдется искомое место проблемы.

  2. Вячеслав

    А как установить два редактора в одной форме?
    Пробовал: у обеих получаются два одинаковых ID

    • Андрей

      Ну так назовите его иначе. В примере в метод field передается поле text. Еще одно поле для редактора должно иметь другое имя, например, text2. Должно работать. В исходном коде тоже порядок.

      • Вячеслав

        Дело в том, что имя поля не меняется. В кратце объясню…
        На странице присутствует 4 одинаковые формы для редактирования одного и того же текста, только на разных языках.
        Сама таблица в БД имеет три аттрибута «product_id», «language_id» и «text».
        P.S. прошу прощения, что изначально не точно сформулировал вопрос

        • Андрей

          А как Вы тогда их отличаете при получении формы на сервере? Даже без визуального редактора и без фреймворка, если взять обычную форму, у каждого поля формы должно быть свое имя, не может быть два поля с одинаковым именем. Допустим, у Вас есть два языка — en (language_id = 1) и ru (language_id = 2). Соответственно, задайте для полей имена text1 и text2. Это будут разные имена и Вам будет понятно при сохранении, под каким ID языка эти данные сохранять: text1 — на английском, text2 — на русском. Как-то так.

          • Вячеслав

            Отличаю по значению кнопки отправки формы (language_id)
            Вот действие в контроллере

            public function actionInstruction($id)
            {
            $request_post = Yii::$app->request->post();
            $models = [];
            $product = Product::getOneProduct($id, 1);

            foreach($this->languages as $language) {
            $temp = ProductInstruction::findModel($id, $language['id']);
            // если такой записи в таблице нет, а такой случай может сложиться,
            // когда к этому моменту был добавлен язык, то создать новую модель
            if (!$temp) {
            $temp = new ProductInstruction();
            $temp->product_id = $id;
            $temp->language_id = $language['id'];
            }

            $models[$language['id']] = $temp; // индекс модели соответствует id-языка
            }

            if (isset($request_post['btn-instruction'])) {

            $index_model = $request_post['btn-instruction'];

            if ( array_key_exists($index_model, $models) ) {

            Yii::$app->session->setFlash('activeTab', $index_model);
            $models[$index_model]->load($request_post);

            if ($models[$index_model]->save()) {
            Yii::$app->session->setFlash('successSave', 'Сохранено');

            } else {
            Yii::$app->session->setFlash('errorSave', 'Не сохранено');
            }

            } else {
            Yii::$app->session->setFlash('erorrLanguage', 'Такого языка нет');
            }

            return $this->refresh();

            } else {

            return $this->render('instruction', [
            'product' => $product,
            'models' => $models,
            'langs' => $this->languages,
            ]);
            }

          • Андрей

            Я Вам выше уже ответил, что у полей должны быть уникальные имена — так все устроено, это не обойти и это правильно. Поэтому дайте полям уникальные имена и проблема с редактором решится. Остальное — это алгоритм, вариант которого я также предложил.

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

Ваш 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