Cum se programează cu Yii2 Intrare text îmbogățit cu Redactor

Dacă vă întrebați: "Ce este Yii?" verificați tutorialul meu anterior: Introducere în Cadrul Yii, care analizează beneficiile Yii și include o prezentare generală a ceea ce este nou în Yii 2.0, lansat în octombrie 2014.

În această serie de programare cu seria Yii2, îndrumăm cititorii în folosirea noii tehnologii Yii2 Framework for PHP. În acest tutorial, vă voi prezenta modul în care utilizați Editorul de text îmbogățit Redactor în cadrul Yii Framework.

Pentru aceste exemple, vom continua să ne imaginăm că construim un cadru pentru afișarea actualizărilor de stare simple, de ex. propriul mini-Twitter.

Doar un memento, eu particip la comentariile de mai jos. Sunt interesat în special dacă aveți abordări diferite sau idei suplimentare sau dacă doriți să sugerați subiecte pentru tutoriale viitoare.

Ce este Redactorul??

Redactor este un puternic editor de text creat de Imperavi. Are o interfață de utilizator extrem de curată și rapidă, oferind în același timp și o platformă pentru extensii puternice. Acesta oferă un JQuery API și are un set larg de plugin-uri, cum ar fi pentru gestionarea imaginilor, formatarea tabelei și editarea pe tot ecranul.

Din fericire, comunitatea Yii a achiziționat o licență nelimitată pentru Redactor pentru orice aplicație construită pe acest cadru. Cu Yii2, aveți posibilitatea să instalați Redactor și să integrați editarea textului bogat în formularele dvs. în doar câteva minute.

De asemenea, puteți să aruncați o privire la tutorialul pe care l-am scris pe Squire, un editor de text mai bogat, mai ușor și mai ușor, care poate fi integrat și cu Yii. 

Instalarea editorului

Vom începe prin instalarea unei extensii Yii2 pentru Redactor (yii2-redactor) folosind compozitorul:

Administratori-MBP: salut compozitorul Jeff $ necesită --prefer-dist yiidoc / yii2-editor "*" ./composer.json a fost actualizat Încărcarea depoziturilor compozitorului cu informații despre pachete Actualizarea dependențelor (inclusiv necesitatea dev) - Instalarea yiidoc / editor (2.0.0) Descărcarea: 100% Fișier de blocare de scriere Generarea fișierelor autoload

În a noastră web / config.php fișier, vom adăuga definiția modulului pentru Redactor:

... end of matrix components ...], 'modules' => ['redactor' => 'yii \ redactor \ RedactorModule'], 'params' => $ params,];

Utilizarea editorului pe Formularele noastre

Să înlocuim câmpul standard de introducere a textului cu Redactor. Iată formularul simplu:

Când schimbăm textarea standard pentru a folosi widgetul Yii2 Redactor în vizualizari / statut / _form.php:

  câmp ($ model, 'mesaj') -> textarea (['rows' => 6])?> câmp ($ model, 'mesaj') -> widget (\ yii \ redactor \ widgets \ Redactor :: className ())> 

Se transformă în aceasta:

Redactor transmite HTML. Deci, când trimiteți formularul, veți vedea codul HTML generat de ceea ce am scris și formatat:

Adăugarea suportului de imagine către Redactor

Pentru a adăuga suport pentru încărcarea imaginilor, trebuie să creați o / web / încărcări în arborele nostru. Apoi, trebuie să modificăm definiția modulului pentru Redactor în /config/web.php:

'moduri' => ['redactor' => 'yii \ redactor \ RedactorModule', 'class' => 'yii \ redactor \ RedactorModule', 'uploadDir' => 'webroot / uploads' / hello / uploads ',],

Apoi adăugăm un imageUpload opțiunea pentru widgetul Redactor:

 câmpul ($ model, 'mesaj') -> widget (\ yii \ redactor \ widgets \ Redactor :: className '/ redactor / upload / image']),],])?> 

De asemenea, am constatat că plugin-ul nu a setat corect uploadUrl Momentan. Deci am editat manual /vendor/yiidoc/yii2-redactor/models/RedactorModule.php pentru a seta uploadUrl aici:

clasa RedactorModule se extinde \ yii \ base \ Module public $ controllerNamespace = 'yii \ redactor \ controllers'; public $ defaultRoute = 'încărcare'; public $ uploadDir = '@ webroot / încărcări'; public $ uploadUrl = '/ hello / uploads'; 

Am raportat acest lucru dezvoltatorului plugin-ului. 

Notă: este recomandat să dați pluginul de la GitHub și să îl plasați în arborele de cod propriu înainte de a face modificări. 

Cu această schimbare, veți vedea o pictogramă de imagine în bara de instrumente Redactor:

Dacă faceți clic pe acesta, veți accesa acest dialog de încărcare a fișierului:

Iată cum arată cu o imagine încărcată:

Fotografia provine dintr-un răsărit de soare, pe care am avut noroc să-l mărturisesc la Chenai, India, la începutul anului 2014.

Când trimiteți starea la imagine, ea apare ca înregistrare HTML:

Editorul plugin-ului recomandă cu înțelepciune să securiziți directorul de încărcări a imaginilor înainte de a găzdui un proiect cu această capacitate: Cum se instalează încărcări Secure Media.

Am descoperit că Redactor este o opțiune incredibil de robustă și lustruită de text pentru aplicațiile mele web. Sper că vă place să o utilizați.

Ce urmeaza?

Urmăriți tutorialele viitoare în programul nostru de programare cu seria Yii2 în timp ce continuăm să vă scufundăm în diferite aspecte ale cadrului. De asemenea, vă recomandăm să verificați seria noastră Building Your Startup With PHP, care utilizează șablonul avansat al lui Yii2, pe măsură ce construim o aplicație din lumea reală.

Salut cererile de teme și teme. Puteți să le postați în comentariile de mai jos sau puteți să ne trimiteți un e-mail pe site-ul meu Lookahead Consulting.

Dacă doriți să știți când vine următorul tutorial Yii2, urmați-mă @reifman pe Twitter sau verificați pagina de instructor. Pagina mea de instructor va include toate articolele din această serie de îndată ce vor fi publicate. 

Link-uri conexe

• Site-ul Redactor al lui Imperavi
• Pluginul Redactor Yii2
• Yii2 Developer Exchange, site-ul meu de resurse Yii2