Программируем с Yii2: Rich Text Input с Redactor

Если вы спрашиваете: «Что такое Yii?» то ознакомьтесь с моим предыдущим учебным пособием: Введение в фреймворк Yii, в котором рассматриваются преимущества Yii и которое включает обзор нового Yii 2.0, выпущенного в октябре 2014 года.

В этой серии статей про Yii2 я рассматриваю все аспекты фреймворка для PHP Yii2. В этом уроке я расскажу вам об использовании редактора Redactor в рамках Yii Framework.

В этих примерах мы продолжим считать, что мы создаем фреймворк для публикации простых обновлений статуса, например, наш собственный мини-Twitter.

Просто напоминание, я участвую в нижеуказанных комментариях. Мне особенно интересно, если у вас разные подходы или дополнительные идеи, или если вы хотите предложить темы для будущих уроков.

Что такое Redactor?

Redactor - мощный текстовый редактор, созданный Imperavi. Он имеет чрезвычайно чистый и быстрый пользовательский интерфейс, а также обеспечивает платформу для мощных расширений. Он предлагает JQuery API и имеет широкий набор плагинов, таких как управление изображениями, форматирование таблиц и полноэкранное редактирование.

К счастью, сообщество Yii приобрело неограниченную лицензию на Redactor для любого приложения, построенного на фреймворке. С Yii2 вы можете установить Redactor и интегрировать его в свои формы всего за несколько минут.

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

Установка Redactor

Мы начнем с установки расширения Yii2 для Redactor (yii2-redactor) с помощью composer:

1

Admins-MBP:hello Jeff$ composer require --prefer-dist yiidoc/yii2-redactor "*"

2

./composer.json has been updated

3

Loading composer repositories with package information

4

Updating dependencies (including require-dev)

5

  - Installing yiidoc/yii2-redactor (2.0.0)                

6

    Downloading: 100%         

7

8

Writing lock file

9

Generating autoload files

В нашем файле web/config.php мы добавим определение модуля для Redactor:

1

    ... end of components array ...

2

    ],

3

    'modules' => [

4

          'redactor' => 'yii\redactor\RedactorModule',

5

      ],

6

    'params' => $params,

7

];

Использование Redactor в наших формах

Давайте заменим стандартное поле ввода текста на Redactor. Вот форма простого текста:

Когда мы меняем стандартную текстовую область, чтобы использовать виджет Yii2 Redactor в views/status/_form.php:

1

<div class="status-form">

2

3

    <?php $form = ActiveForm::begin(); ?>

4

5

    <? // = $form->field($model, 'message')->textarea(['rows' => 6]) ?>

6

    <?= $form->field($model, 'message')->widget(\yii\redactor\widgets\Redactor::className()) ?>

7

Он трансформируется в это:

Redactor отправляет HTML. Итак, когда вы отправляете форму, вы увидите HTML, сгенерированный тем, что мы набрали и отформатировали:

Добавление поддержки изображений в Redactor

Чтобы добавить поддержку для загрузки изображений, нам нужно создать каталог /web/uploads в нашем дереве каталогов. Затем нам нужно изменить определение модуля для Redactor в /config/web.php:

1

'modules' => [

2

          'redactor' => 'yii\redactor\RedactorModule',

3

          'class' => 'yii\redactor\RedactorModule',

4

          'uploadDir' => '@webroot/uploads',

5

          'uploadUrl' => '/hello/uploads',

6

      ],

Затем добавим параметр imageUpload в виджет Redactor:

1

    <?= $form->field($model, 'message')->widget(\yii\redactor\widgets\Redactor::className(),

2

    [

3

       'clientOptions' => [

4

           'imageUpload' => \yii\helpers\Url::to(['/redactor/upload/image']),

5

       ],

6

    ]

7

      ) ?>

Я также обнаружил, что плагин в данный момент неправильно настроил uploadUrl. Поэтому я вручную отредактировал /vendor/yiidoc/yii2-redactor/models/RedactorModule.php, чтобы установить uploadUrl здесь:

1

class RedactorModule extends \yii\base\Module

2

{

3

4

    public $controllerNamespace = 'yii\redactor\controllers';

5

    public $defaultRoute = 'upload';

6

    public $uploadDir = '@webroot/uploads';

7

    public $uploadUrl = '/hello/uploads';

Я сообщил об этом разработчику плагина.

Примечание. Лучше всего форкнуть плагин из GitHub и поместить его в свое дерево кода, прежде чем вносить изменения.

С этим изменением вы увидите значок изображения на панели инструментов Redactor:

При нажатии этой кнопки открывается диалоговое окно загрузки файла:

Вот как выглядит загруженное изображение:

Фотография с восхода солнца, который мне посчастливилось засвидетельствовать в Ченнаи, Индия, в начале 2014 года.

Когда вы отправляете статус с изображением, он отображается как HTML в записи:

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

Я обнаружил, что Redactor - это невероятно прочный и богатый текстовый вариант для моих веб-приложений. Надеюсь, что он вам понравится.

Что дальше?

Следите за предстоящими учебниками в нашей серии Yii2, поскольку мы продолжаем погружаться в разные аспекты фреймворка. Вы также можете проверить нашу серию Строим стартап на PHP, в которой используется расширенный шаблон Yii2.

Я приветствую пожелания по темам для статей. Вы можете опубликовать их в комментариях ниже или отправить мне по электронной почте на моем веб-сайте Lookahead Consulting.

Если вы хотите узнать, когда выйдет следующий учебник Yii2, подпишитесь на меня @reifman в Twitter или проверьте мою страницу инструктора. Моя страница инструктора будет включать все статьи из этой серии, как только они будут опубликованы.

Ссылки по теме

• Веб-сайт Imperavi's Redactor
• Плагин Yii2 Redactor
• Yii2 Developer Exchange, мой ресурсный сайт Yii2