Dernière modification le 23 octobre 2020
Pour pouvoir ajouter nos annonces, il peut être utile de proposer à nos visiteurs de rédiger la description au moyen d'un éditeur WYSIWYG (What You See Is What You Get) pour bénéficier d'options de mise en forme.
Pour ce faire, nous utiliserons les bundles FOSCKeditor et Elfinder, très adaptés à ce genre d'usage.
Installer FOSCKEditor
Pour procéder à l'installation de FOSCkeditor, nous utiliserons le terminal et composer.
La 1ère commande à entrer dans le terminal va récupérer FOSCKEditor et l'intégrer à votre projet Symfony et au dossier vendor.
composer require friendsofsymfony/ckeditor-bundle
Il faudra ensuite télécharger les ressources nécessaires au fonctionnement de CKEditor (HTML, CSS, Javascript) et les installer.
php bin/console assets:install public
Voilà CKEditor maintenant installé.
Configurer FOSCKEditor
Une fois installé, CKEditor est configurable directement depuis le fichier "config/packages/fos_ckeditor.yaml" qui a été créé automatiquement
Par défaut, il contient les lignes suivantes
Dans l'exemple ci-dessous, nous créons une configuration appelée "main_config" en ajoutant quelques lignes dans le fichier
Une fois CKEditor installé et configuré, il nous suffit de l'appeler depuis un formulaire Symfony pour l'intégrer à celui-ci.
Le Bundle FOSCKEditor que nous avons installé pourra être appelé comme ci-dessous, par exemple, dans le fichier "AnnoncesType.php" de notre projet
Si nous souhaitons uploader des images et les afficher dans notre article, une interface d'ajout d'images sera nécessaire.
Avec CKEditor, le bouton d'ajout d'images par défaut affiche cette fenêtre
Dans cette fenêtre, il est uniquement possible d'insérer l'URL d'une image.
Pour ajouter l'envoi d'images, nous allons utiliser un bundle appelé "elfinder".
Installer elfinder
Pour installer elfinder, nous allons utiliser composer et exécuter la commande
Une fois elfinder installé, il faut déclarer son existence à CKEditor.
Nous allons donc modifier le fichier fos_ckeditor.yaml et y ajouter les 2 dernières lignes ci-dessous dans toutes les configurations qui nous intéressent (pour nous main_config)
En effet, la fenêtre de choix des images affiche maintenant un bouton "Parcourir le serveur"
Ce bouton ouvre l'interface de elfinder comme ci-dessous
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat
Visualisez les fichiers de cette série sur GitHub
Partager