Slik programmerer du med Yii2 Rich Text Input With Redactor

Hvis du spør, "Hva er Yii?" sjekk ut min tidligere opplæring: Introduksjon til Yii Framework, som vurderer fordelene med Yii og inneholder en oversikt over hva som er nytt i Yii 2.0, utgitt i oktober 2014.

I denne programmeringen med Yii2-serien, er jeg veiledende lesere i bruk av den nylig oppgraderte Yii2 Framework for PHP. I denne opplæringen skal jeg introdusere deg til å bruke den rike tekstredaktøren Redactor i Yii Framework.

For disse eksemplene fortsetter vi å forestille oss at vi bygger et rammeverk for å legge ut enkle statusoppdateringer, f.eks. vår egen mini-Twitter.

Bare en påminnelse, jeg deltar i kommentar tråder nedenfor. Jeg er spesielt interessert hvis du har forskjellige tilnærminger eller flere ideer, eller hvis du vil foreslå emner for fremtidige opplæringsprogrammer.

Hva er Redactor?

Redactor er en kraftig rik tekstredigerer laget av Imperavi. Den har et ekstremt rent og raskt brukergrensesnitt, samtidig som det gir en plattform for kraftige utvidelser. Den tilbyr en JQuery API og har et bredt sett med plugins som for bildebehandling, tabellformatering og fullskjerm redigering.

Heldigvis kjøpte Yii-fellesskapet en ubegrenset lisens til Redactor for enhver applikasjon bygget på rammen. Med Yii2 kan du installere Redactor og integrere rik tekstredigering i skjemaene dine på bare noen få minutter.

Du kan også ta en titt på opplæringen jeg har skrevet på Squire, et alternativt, mer lett, rik tekstredigeringsprogram, som også kan integreres med Yii. 

Installere Redactor

Vi starter med å installere en Yii2-utvidelse for Redactor (yii2-redactor) ved hjelp av komponist:

Admins-MBP: hei Jeff $ komponist krever --prefer-dist yiidoc / yii2-redactor "*" ./composer.json har blitt oppdatert Laster kompositorbeholdninger med pakkedata Oppdatere avhengigheter (inkludert krav-dev) - Installere yiidoc / yii2- redaktor (2.0.0) Nedlasting: 100% Skrive låsfil Generere autoload-filer

I vår web / config.php fil, legger vi til moduldefinisjonen for Redactor:

... ende av komponent array ...], 'modules' => ['redactor' => 'yii \ redactor \ RedactorModule',], 'params' => $ params,];

Bruke Redactor på våre skjemaer

La oss erstatte standard tekstfelt med Redactor. Her er det enkle tekstformularen:

Når vi endrer standard tekstområdet for å bruke Yii2 Redactor-widgeten i visninger / status / _form.php:

  felt ($ modell, melding) -> textarea (['rows' => 6])?> felt ($ modell, melding) -> widget (\ yii \ redactor \ widgets \ Redactor :: className ())?> 

Det er forvandlet til dette:

Redactor sender HTML. Så når du sender inn skjemaet, ser du HTML-koden generert av det vi skrev og formatert:

Legge til bildestøtte til redaktor

For å legge til støtte for opplasting av bilder, må vi opprette en / web / opplasting katalog i vårt tre. Da må vi endre moduldefinisjonen for Redactor i /config/web.php:

'moduler' => ['redactor' => 'yii \ redactor \ RedactorModule', 'klasse' => 'yii \ redactor \ RedactorModule', 'uploadDir' => '@ webroot / uploads', 'uploadUrl' => ' / hei / opplastinger ',],

Så legger vi til en imageUpload alternativ til Redactor-widgeten:

 felt ($ modell, melding) -> widget (\ yii \ redactor \ widgets \ Redactor :: className (), ['clientOptions' => ['imageUpload' => \ yii \ helpers \ Url :: til '/ redaktor / opplasting / bilde']),],])?> 

Jeg fant også at plugin ikke satt riktig uploadUrl på denne tiden. Så jeg redigerte manuelt /vendor/yiidoc/yii2-redactor/models/RedactorModule.php å sette uploadUrl her:

klasse RedactorModule utvider \ yii \ base \ Modul public $ controllerNamespace = 'yii \ redactor \ controllers'; offentlig $ defaultRoute = 'last opp'; offentlig $ uploadDir = '@ webroot / uploads'; offentlig $ uploadUrl = '/ hei / opplastinger'; 

Jeg har rapportert dette til plugin-utvikleren. 

Merk: Det er best å forklare plugin-modulen fra GitHub og plassere den i ditt eget kodetre før du gjør endringer. 

Med denne endringen ser du et bildeikon i Redactor-verktøylinjen:

Ved å klikke på den kommer denne filopplastingsdialogen opp:

Slik ser det ut med et lastet bilde:

Bildet er fra en soloppgang Jeg var heldig å vitne i Chenai, India, tidlig i 2014.

Når du sender inn statusen med bildet, vises det som HTML i posten:

Plugin-utvikleren anbefaler klokt at du sikrer bildopplastingsmappen før du er vert for et prosjekt med denne funksjonen: Slik konfigurerer du Sikkerhetsmedieopplastinger.

Jeg har funnet ut at Redactor er et utrolig robust og polert, rikt tekstalternativ for mine webapplikasjoner. Jeg håper du liker å bruke den.

Hva blir det neste?

Se etter kommende opplæringsprogrammer i Programmering med Yii2-serien når vi fortsetter å dykke inn i ulike aspekter av rammen. Du vil kanskje også sjekke ut vårt Bygg din oppstart med PHP-serien, som bruker Yii2s avanserte mal når vi bygger en ekte verdensapplikasjon.

Jeg aksepterer funksjon og emneforespørsler. Du kan legge inn dem i kommentarene under eller sende meg en e-post på Lookahead Consulting.

Hvis du vil vite når neste Yii2 opplæring kommer, følg meg @ reifman på Twitter eller sjekk min instruktørside. Min instruktørside vil inkludere alle artiklene fra denne serien så snart de er publisert. 

Relaterte linker

• Imperavi's Redactor Nettsted
• Yii2 Redactor Plugin
• Yii2 Developer Exchange, min Yii2 ressurs side