Hur man programmerar med Yii2 Rich Text Input With Redactor

Om du frågar, "Vad är Yii?" kolla in min tidigare handledning: Introduktion till Yii Framework, som granskar fördelarna med Yii och innehåller en översikt över vad som är nytt i Yii 2.0, släppt i oktober 2014.

I denna programmering med Yii2-serien guidar jag läsare som använder den nyuppgraderade Yii2 Framework for PHP. I denna handledning kommer jag att presentera dig för att använda den rika textredigeraren Redactor inom Yii Framework.

För dessa exempel fortsätter vi att föreställa oss att vi bygger ett ramverk för att skicka enkla statusuppdateringar, t.ex. vår egen mini-Twitter.

Bara en påminnelse, jag deltar i kommentera trådarna nedan. Jag är särskilt intresserad om du har olika tillvägagångssätt eller ytterligare idéer, eller om du vill föreslå ämnen för framtida handledning.

Vad är Redactor?

Redactor är en kraftfull rik textredigerare skapad av Imperavi. Den har ett extremt rent och snabbt användargränssnitt, samtidigt som det ger en plattform för kraftfulla tillägg. Den erbjuder ett JQuery API och har en mängd olika plugins som för bildhantering, tabellformatering och fullskärmsredigering.

Lyckligtvis köpte Yii-gemenskapen en obegränsad licens till Redactor för alla applikationer som byggdes på ramen. Med Yii2 kan du installera Redactor och integrera rik textredigering i dina formulär på bara några minuter.

Du kan också ta en titt på handledningen som jag har skrivit på Squire, en alternativ, lättare rik textredigerare, som också kan integreras med Yii. 

Installera Redactor

Vi börjar med att installera en Yii2-förlängning för Redactor (yii2-redactor) med hjälp av kompositör:

Admins-MBP: hej Jeff $ composer kräver --prefer-dist yiidoc / yii2-redactor "*" ./composer.json har uppdaterats Laddar kompositregister med paketinformation Uppdatering av beroenden (inklusive krav-dev) - Installera yiidoc / yii2- redaktor (2.0.0) Nedladdning: 100% Skriva låsfil Generera autoload-filer

I vår webb / config.php fil lägger vi till moduldefinitionen för Redactor:

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

Använda Redactor på våra formulär

Låt oss ersätta standardinmatningsfältet med Redactor. Här är det vanliga textformuläret:

När vi byter standardtextarea för att använda Yii2 Redactor-widgeten i visningar / status / _form.php:

  fält ($ modell, meddelande) -> textarea (['rows' => 6])?> fält ($ modell, meddelande) -> widget (\ yii \ redactor \ widgets \ Redactor :: className ())?> 

Det förvandlas till detta:

Redaktor skickar HTML. Så när du skickar formuläret ser du HTML som genererats av det vi skrev och formaterade:

Lägga till bildstöd till redaktor

För att lägga till stöd för att ladda upp bilder behöver vi skapa en / webb / uppladdningar katalog i vårt träd. Då måste vi modifiera moduldefinitionen för Redactor i /config/web.php:

'Moduler' => ['redactor' => 'yii \ redaktor \ RedactorModule', 'class' => 'yii \ redactor \ RedactorModule', 'uploadDir' => '@ webroot / uploads', 'uploadUrl' => ' / hej / uppladdningar ',],

Sedan lägger vi till en imageUpload alternativet till Redactor-widgeten:

 fält ($ modell, meddelande) -> widget (\ yii \ redactor \ widgets \ Redaktor :: className (), ['clientOptions' => ['imageUpload' => \ yii \ helpers \ Url :: till '/ redaktor / upload / image']),],])> 

Jag fann också att plugin inte stämde korrekt uploadUrl just nu. Så jag redigerade manuellt /vendor/yiidoc/yii2-redactor/models/RedactorModule.php att ställa in uploadUrl här:

klass RedactorModule utökar \ yii \ base \ Modul public $ controllerNamespace = 'yii \ redactor \ controllers'; public $ defaultRoute = 'ladda upp'; public $ uploadDir = '@ webroot / uploads'; offentliga $ uploadUrl = '/ hej / uploads'; 

Jag har rapporterat detta till pluginutvecklaren. 

Obs! Det är bäst att gaffla plugin från GitHub och placera det i ditt eget kodträd innan du gör ändringar. 

Med den här ändringen ser du en bildikon i Redactor-verktygsfältet:

Om du klickar på den hämtar den här filöverföringsdialogrutan:

Så här ser det ut som en uppladdad bild:

Bilden är från en soluppgång Jag var lycklig att bevittna i Chenai, Indien, i början av 2014.

När du skickar in statusen med bilden visas den som HTML i posten:

Plugin-utvecklaren rekommenderar klokt att du säkerställer din bilduppladdningskatalog innan du värd ett projekt med den här funktionen: Så här installerar du Säkra Media Uploads.

Jag har funnit att Redactor är en otroligt robust och polerad rik textalternativ för mina webbapplikationer. Jag hoppas att du gillar att använda den.

Vad kommer härnäst?

Titta på kommande tutorials i vår programmering med Yii2-serien när vi fortsätter att dyka in i olika aspekter av ramen. Du kanske också vill kolla in vår Bygga din start med PHP-serien, som använder Yii2s avancerade mall när vi bygger en riktig världsapplikation.

Jag välkomnar funktion och ämnesförfrågningar. Du kan skicka in dem i kommentarerna nedan eller maila mig på min Lookahead Consulting webbplats.

Om du vill veta när nästa Yii2 handledning kommer, följ mig @ reifman på Twitter eller kolla min instruktörssida. Min instruktörssida kommer att innehålla alla artiklar från denna serie så snart de publiceras. 

relaterade länkar

• Imperavis Redactor Webbsida
• Yii2 Redaktor Plugin
• Yii2 Developer Exchange, min Yii2 resurs webbplats