Comment programmer avec Yii2 Saisie de texte enrichi avec rédacteur

Si vous demandez, "Qu'est-ce que Yii?" Découvrez mon tutoriel précédent: Introduction au framework Yii, qui passe en revue les avantages de Yii et inclut un aperçu des nouveautés de Yii 2.0, publiées en octobre 2014.

Dans cette série de programmation avec Yii2, je guide les lecteurs dans l'utilisation du framework Yii2 pour PHP récemment mis à jour. Dans ce tutoriel, je vais vous présenter l'utilisation de l'éditeur de texte enrichi Redactor dans le framework Yii..

Pour ces exemples, nous allons continuer à imaginer que nous construisons un cadre pour la publication de mises à jour de statut simples, par exemple. notre propre mini-Twitter.

Juste un rappel, je participe aux commentaires ci-dessous. Je suis particulièrement intéressé si vous avez des approches différentes ou des idées supplémentaires, ou si vous souhaitez suggérer des sujets pour de futurs tutoriels..

Qu'est-ce que Rédacteur?

Redactor est un puissant éditeur de texte enrichi créé par Imperavi. Il possède une interface utilisateur extrêmement propre et rapide, tout en fournissant une plate-forme pour des extensions puissantes. Il propose une API JQuery et un large éventail de plug-ins, tels que la gestion des images, le formatage des tableaux et l'édition en plein écran..

Heureusement, la communauté Yii a acheté une licence illimitée à Redactor pour toute application construite sur le framework. Avec Yii2, vous pouvez installer Redactor et intégrer l'édition de texte enrichi à vos formulaires en quelques minutes seulement..

Vous pouvez également consulter le didacticiel que j'ai écrit sur Squire, un autre éditeur de texte enrichi plus léger, qui peut également être intégré à Yii.. 

Installation du rédacteur

Nous allons commencer par installer une extension Yii2 pour Redactor (yii2-rédacteur) en utilisant le compositeur:

Admins-MBP: hello Jeff $ composer require --prefer-dist yiidoc / rédacteur-yii2 "*" ./composer.json a été mis à jour Chargement des référentiels de compositeur avec les informations sur le paquet. redactor (2.0.0) Téléchargement: 100% Écrire un fichier verrou Générer des fichiers à chargement automatique

Dans notre web / config.php fichier, nous ajouterons la définition du module pour Redactor:

… Fin du tableau de composants…], 'modules' => ['redactor' => 'yii \ redactor \ RedactorModule',], 'params' => $ params,];

Utilisation de Rédacteur sur nos formulaires

Remplaçons le champ de saisie de texte standard par Redactor. Voici le formulaire en texte brut:

Lorsque nous modifions la zone de texte standard pour utiliser le widget Rédacteur Yii2 dans views / status / _form.php:

  champ ($ modèle, 'message') -> textarea (['rows' = = 6])?> champ ($ modèle, 'message') -> widget (\ yii \ redactor \ widgets \ Redactor :: className ())?> 

C'est transformé en ceci:

Rédacteur soumet HTML. Ainsi, lorsque vous soumettez le formulaire, vous verrez le code HTML généré par ce que nous avons saisi et mis en forme:

Ajout du support d'image à Redactor

Pour ajouter un support pour le téléchargement des images, nous devons créer un / web / uploads répertoire dans notre arbre. Ensuite, nous devons modifier la définition du module pour Redactor dans /config/web.php:

'modules' => ['redactor' => 'yii \ rédacteur \ RedactorModule', 'class' => 'yii \ rédacteur \ RedactorModule', 'uploadDir' => '@ Webroot / uploads', 'uploadUrl' => ' / bonjour / uploads ',],

Puis on ajoute un imageUpload option pour le widget Rédacteur:

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

J'ai aussi constaté que le plugin ne définissait pas correctement le uploadUrl en ce moment. Donc j'ai édité manuellement /vendor/yiidoc/yii2-redactor/models/RedactorModule.php pour définir le uploadUrl ici:

class RedactorModule s \ 'étend \ yii \ base \ Module public $ controllerNamespace =' yii \ redactor \ controllers '; public $ defaultRoute = 'upload'; public $ uploadDir = '@ webroot / uploads'; public $ uploadUrl = '/ hello / uploads'; 

J'ai signalé cela au développeur du plugin. 

Note: Il est préférable de créer le plugin de GitHub et de le placer dans votre propre arbre de code avant d'apporter des modifications.. 

Avec cette modification, vous verrez une icône d’image dans la barre d’outil Rédacteur:

Cliquez dessus pour afficher cette boîte de dialogue de téléchargement de fichier:

Voici à quoi cela ressemble avec une image téléchargée:

La photo provient d'un lever de soleil que j'ai eu la chance d'assister à Chenai, en Inde, au début de 2014..

Lorsque vous soumettez le statut avec l'image, il apparaît au format HTML dans l'enregistrement:

Le développeur du plug-in vous recommande à juste titre de sécuriser votre répertoire de téléchargement d’images avant d’héberger un projet doté de cette fonctionnalité: Comment configurer des téléchargements sécurisés avec le média.

J'ai constaté que Redactor est une option de texte enrichi incroyablement robuste et sophistiquée pour mes applications Web. J'espère que vous apprécierez l'utiliser.

Et après?

Surveillez les prochains tutoriels de notre série Programmation avec Yii2 pendant que nous continuons à plonger dans différents aspects du cadre. Vous pouvez également consulter notre série Construire votre démarrage avec PHP, qui utilise le modèle avancé de Yii2 pour créer une application du monde réel..

Je me félicite des demandes de fonctionnalités et de sujets. Vous pouvez les poster dans les commentaires ci-dessous ou m'envoyer un email sur mon site Lookahead Consulting.

Si vous souhaitez savoir quand le prochain tutoriel Yii2 arrive, suivez-moi @reifman sur Twitter ou consultez ma page d'instructeur. Ma page d’instructeur comprendra tous les articles de cette série dès leur publication.. 

Liens connexes

• Site web des rédacteurs d'Imperavi
• Le plugin rédacteur Yii2
• Yii2 Developer Exchange, mon site de ressources Yii2