So programmieren Sie mit Yii2 Rich Text-Eingabe mit Redactor

Was Sie erstellen werden

Wenn Sie fragen: "Was ist Yii?" Schauen Sie sich mein früheres Tutorial an: Einführung in das Yii-Framework, Hier werden die Vorteile von Yii beschrieben und ein Überblick über die Neuerungen in Yii 2.0 (Oktober 2014) gegeben.

In dieser Programmierserie mit Yii2 leite ich die Leser beim Einsatz des neu aktualisierten Yii2-Frameworks für PHP. In diesem Tutorial werde ich Ihnen die Verwendung des Rich Text-Editors Redactor im Yii Framework vorstellen.

Für diese Beispiele stellen wir uns weiterhin vor, dass wir ein Framework für die Veröffentlichung einfacher Statusaktualisierungen erstellen, z. unser eigenes Mini-Twitter.

Nur zur Erinnerung, ich beteilige mich an den Kommentarthreads unten. Ich bin besonders interessiert, wenn Sie unterschiedliche Ansätze oder zusätzliche Ideen haben oder wenn Sie Themen für zukünftige Tutorials vorschlagen möchten.

Was ist Redactor??

Redactor ist ein mächtiger Rich-Text-Editor, der von Imperavi erstellt wurde. Es verfügt über eine extrem saubere und schnelle Benutzeroberfläche und bietet gleichzeitig eine Plattform für leistungsstarke Erweiterungen. Es bietet eine JQuery-API und verfügt über eine Vielzahl von Plugins, z. B. für die Bildverwaltung, Tabellenformatierung und die Vollbildbearbeitung.

Glücklicherweise erwarb die Yii-Community eine unbegrenzte Lizenz für Redactor für jede auf dem Framework basierende Anwendung. Mit Yii2 können Sie Redactor installieren und die Rich Text-Bearbeitung in wenigen Minuten in Ihre Formulare integrieren.

Sie können auch einen Blick auf das Tutorial werfen, das ich über Squire geschrieben habe, einen alternativen, leichteren Rich-Text-Editor, der auch in Yii integriert werden kann.

Redactor installieren

Wir beginnen mit der Installation einer Yii2-Erweiterung für Redactor (yii2-redactor) mit dem Komponisten:

Admins-MBP: Hallo Jeff $ composer erfordern --prefer-dist yiidoc / yii2-redactor "*" ./composer.json wurde aktualisiert. Composer-Repositorys mit Paketinformationen werden geladen. Abhängigkeiten werden aktualisiert (einschließlich required-dev) - yiidoc / yii2- wird installiert redactor (2.0.0) Herunterladen: 100% Sperrdatei schreiben Automatisches Laden von Dateien

In unserer web / config.php Datei, fügen wir die Moduldefinition für Redactor hinzu:

… Ende des Komponentenarrays…], 'modules' => ['redactor' => 'yii \ redactor \ RedactorModule',], 'params' => $ params,];

Verwendung von Redactor in unseren Formularen

Ersetzen Sie das Standard-Texteingabefeld durch Redactor. Hier ist das Nur-Text-Formular:

Wenn wir den Standardtextbereich ändern, um das Yii2 Redactor-Widget in zu verwenden Ansichten / Status / _form.php:

  Feld ($ model, 'message') -> Textbereich (['Zeilen' => 6])?> Feld ($ model, 'message') -> Widget (\ yii \ redactor \ widgets \ Redactor :: className ())?>

Es ist in dieses verwandelt:

Redactor übermittelt HTML. Wenn Sie das Formular absenden, wird der HTML-Code durch das eingegeben, was wir eingegeben und formatiert haben:

Bildunterstützung für Redactor hinzufügen

Um Unterstützung für das Hochladen von Bildern hinzuzufügen, müssen Sie eine / web / uploads Verzeichnis in unserem Baum. Dann müssen wir die Moduldefinition für Redactor in ändern /config/web.php:

'modules' => ['redactor' => 'yii \ redactor \ RedactorModule', 'class' => 'yii \ redactor \ RedactorModule', 'uploadDir' => '@ webroot / uploads', 'uploadUrl' => ' / Hallo / Uploads ',],

Dann fügen wir ein imageUpload Option für das Redactor-Widget:

 Feld ($ model, 'message') -> Widget (\ yii \ redactor \ widgets \ Redactor :: className (), ['clientOptions') => ['imageUpload' => \ yii \ helpers \ Url :: to ([ '/ redactor / upload / image']),],])?>

Ich fand auch, dass das Plugin das nicht richtig gesetzt hat uploadUrl in diesem Moment. Also habe ich manuell bearbeitet /vendor/yiidoc/yii2-redactor/models/RedactorModule.php einstellen uploadUrl Hier:

Klasse RedactorModule erweitert \ yii \ base \ Module public $ controllerNamespace = 'yii \ redactor \ controller'; public $ defaultRoute = 'upload'; public $ uploadDir = '@ webroot / uploads'; public $ uploadUrl = '/ hallo / uploads';

Ich habe dies dem Plugin-Entwickler gemeldet.

Hinweis: Es ist am besten, das Plugin aus GitHub zu formen und es in Ihrem eigenen Codebaum zu platzieren, bevor Sie Änderungen vornehmen.

Mit dieser Änderung sehen Sie ein Bildsymbol in der Redactor-Symbolleiste:

Wenn Sie darauf klicken, wird das Dialogfeld zum Hochladen von Dateien angezeigt:

So sieht es mit einem hochgeladenen Bild aus:

Das Foto stammt von einem Sonnenaufgang, den ich Anfang 2014 in Chenai, Indien, miterleben durfte.

Wenn Sie den Status mit dem Bild übermitteln, wird er im Datensatz als HTML angezeigt:

Der Plugin-Entwickler empfiehlt, dass Sie das Image-Upload-Verzeichnis sichern, bevor Sie ein Projekt mit dieser Funktion hosten: So richten Sie Secure Media-Uploads ein.

Ich habe festgestellt, dass Redactor eine unglaublich robuste und polierte Rich-Text-Option für meine Webanwendungen ist. Ich hoffe es gefällt euch, es zu benutzen.

Was kommt als nächstes?

Achten Sie auf kommende Tutorials in unserer Programmierserie "Programmieren mit Yii2", während wir weiter in verschiedene Aspekte des Frameworks eintauchen. Vielleicht möchten Sie auch unsere Reihe für das Erstellen Ihres Startups mit PHP ausprobieren, die die erweiterte Vorlage von Yii2 verwendet, während wir eine reale Anwendung erstellen.

Ich freue mich über Feature- und Themenanfragen. Sie können sie in den Kommentaren unten posten oder mich auf meiner Lookahead Consulting-Website per E-Mail benachrichtigen.

Wenn Sie wissen möchten, wann das nächste Yii2-Tutorial ankommt, folgen Sie mir @reifman auf Twitter oder besuchen Sie meine Instructor-Seite. Meine Ausbilderseite enthält alle Artikel dieser Serie, sobald sie veröffentlicht sind.