Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

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

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called How to Program With Yii2.
How to Program With Yii2: User Access Controls
How to Program With Yii2: Sluggable Behavior

Russian (Pусский) translation by Anna k.Ivanova (you can also view the original English article)

Final product image
What You'll Be Creating

Если вы спрашиваете: «Что такое 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:

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

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

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

Standard Textarea Input form

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

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

Status Form With Redactor

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

The HTML for the message generated and submitted by Redactor

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

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

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

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

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

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

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

Image icon in the Redactor toolbar

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

Insert image file upload dialog box

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

Redactor with the image in place at the top

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

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

Resulting HTML with img tag to uploaded image

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

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

Что дальше?

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

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

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.