Se stai chiedendo "Cos'è Yii?" guarda il mio tutorial precedente: Introduzione al framework Yii, che rivede i vantaggi di Yii e include una panoramica delle novità in Yii 2.0, rilasciata nell'ottobre 2014.
In questa serie di programmazione con Yii2, guido i lettori all'uso del nuovo Yii2 Framework per PHP. In questo tutorial, ho intenzione di presentarvi l'utilizzo dell'editor di testo RTF Redactor all'interno di Yii Framework.
Per questi esempi, continueremo a immaginare che stiamo costruendo un framework per la pubblicazione di semplici aggiornamenti di stato, ad es. il nostro mini-Twitter.
Solo un promemoria, parteciperò alle discussioni dei commenti qui sotto. Sono particolarmente interessato se hai approcci diversi o idee aggiuntive o se vuoi suggerire argomenti per futuri tutorial.
Redactor è un potente editor di testo ricco creato da Imperavi. Ha un'interfaccia utente estremamente pulita e veloce, mentre fornisce anche una piattaforma per estensioni potenti. Offre un'API JQuery e ha un ampio set di plugin come per la gestione delle immagini, la formattazione delle tabelle e la modifica a schermo intero.
Fortunatamente, la comunità Yii ha acquistato una licenza illimitata per Redactor per qualsiasi applicazione creata sul framework. Con Yii2, è possibile installare Redactor e integrare la modifica di testo avanzato nei moduli in pochi minuti.
Potresti anche dare un'occhiata al tutorial che ho scritto su Squire, un editor di testo ricco alternativo, più leggero, che può anche essere integrato con Yii.
Inizieremo installando un'estensione Yii2 per Redactor (yii2-redactor
) utilizzando il compositore:
Admins-MBP: ciao Jeff $ compositore richiede --prefer-dist yiidoc / yii2-redactor "*" ./composer.json è stato aggiornato Caricamento dei repository di compositore con informazioni sul pacchetto Aggiornamento delle dipendenze (incluso require-dev) - Installazione di yiidoc / yii2- redactor (2.0.0) Download: 100% Scrittura file di blocco Generazione di file autoload
Nel nostro web / config.php
file, aggiungeremo la definizione del modulo per Redactor:
... end of components array ...], 'modules' => ['redactor' => 'yii \ redactor \ RedactorModule',], 'params' => $ params,];
Sostituiamo il campo di inserimento del testo standard con Redactor. Ecco il modulo di testo in chiaro:
Quando cambiamo la textarea standard per usare il widget Yii2 Redactor in views / Stato / _form.php
:
// = $form->campo ($ model, 'message') -> textarea (['rows' => 6])?> = $form->campo ($ model, 'message') -> widget (\ yii \ redactor \ widgets \ Redactor :: className ())?>Si è trasformato in questo:
Redactor invia HTML. Quindi, quando invii il modulo, vedrai l'HTML generato da ciò che abbiamo digitato e formattato:
Aggiunta di supporto immagine a Redactor
Per aggiungere supporto per il caricamento delle immagini, dobbiamo creare un
/ web / uploads
directory nel nostro albero. Quindi, dobbiamo modificare la definizione del modulo per Redactor in/config/web.php
:'modules' => ['redactor' => 'yii \ redactor \ RedactorModule', 'class' => 'yii \ redactor \ RedactorModule', 'uploadDir' => '@ webroot / uploads', 'uploadUrl' => ' / ciao / caricamenti ',],Quindi aggiungiamo un
imageUpload
opzione per il widget Redactor:= $form->field ($ model, 'message') -> widget (\ yii \ redactor \ widgets \ Redactor :: className (), ['clientOptions' => ['imageUpload' => \ yii \ helpers \ Url :: to ([ '/ redactor / upload / image']),],])?>Ho anche scoperto che il plugin non ha impostato correttamente il
uploadURL
A quest'ora. Così ho modificato manualmente/vendor/yiidoc/yii2-redactor/models/RedactorModule.php
per impostare iluploadURL
Qui:la classe RedactorModule estende \ yii \ base \ Module public $ controllerNamespace = 'yii \ redactor \ controller'; public $ defaultRoute = 'upload'; public $ uploadDir = '@ webroot / uploads'; public $ uploadUrl = '/ hello / uploads';Ho segnalato questo allo sviluppatore del plugin.
Nota: è meglio inserire il plugin da GitHub e inserirlo nella propria struttura del codice prima di apportare modifiche.
Con questa modifica, vedrai un'icona dell'immagine nella barra degli strumenti Redactor:
Facendo clic su questo dialogo di caricamento del file:
Ecco come appare con un'immagine caricata:
La foto è di un alba che ho avuto la fortuna di testimoniare a Chenai, in India, all'inizio del 2014.
Quando si invia lo stato con l'immagine, appare come HTML nel record:
Lo sviluppatore del plugin consiglia saggiamente di proteggere la directory dei caricamenti di immagini prima di ospitare un progetto con questa funzionalità: Come installare i caricamenti di Secure Media.
Ho trovato che Redactor è un'opzione di testo ricco incredibilmente robusto e lucido per le mie applicazioni web. Spero ti piaccia usarlo.
Qual'è il prossimo?
Guarda le prossime esercitazioni nella nostra serie Programming With Yii2 mentre continuiamo a esplorare i diversi aspetti del framework. Potresti anche voler dare un'occhiata alla nostra serie Building Startup with PHP, che utilizza il template avanzato di Yii2 mentre costruiamo un'applicazione del mondo reale.
Accolgo richieste di argomenti e argomenti. Puoi postarli nei commenti qui sotto o mandarmi una e-mail sul mio sito Web di Lookahead Consulting.
Se vuoi sapere quando arriverà il prossimo tutorial di Yii2, seguimi @reifman su Twitter o controlla la mia pagina di istruttore. La mia pagina di istruttore includerà tutti gli articoli di questa serie non appena saranno pubblicati.
Link correlati
- Sito Web di Redattore di Imperavi
- Il plugin Yii2 Redactor
- Yii2 Developer Exchange, il mio sito di risorse Yii2