4- Installer CKEditor et Elfinder avec Symfony 5.1

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 ckeditor:install

Ensuite, nous allons installer toutes les ressources nécessaires dans le dossier "public"

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

# Read the documentation: https://symfony.com/doc/current/bundles/FOSCKEditorBundle/index.html

twig:
form_themes:
- '@FOSCKEditor/Form/ckeditor_widget.html.twig'

Nous allons y ajouter les configurations qui nous intéressent, et principalement la liste des options qui seront proposées aux utilisateurs.

Dans l'exemple ci-dessous, nous créons une configuration appelée "main_config" en ajoutant quelques lignes dans le fichier

# Read the documentation: https://symfony.com/doc/current/bundles/FOSCKEditorBundle/index.html

twig:
form_themes:
- '@FOSCKEditor/Form/ckeditor_widget.html.twig'

fos_ck_editor:
configs:
main_config:
toolbar:
- { name: "styles", items: ['Bold', 'Italic', 'Underline', 'Strike', 'Blockquote', '-', 'Link', '-', 'RemoveFormat', '-', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Image', 'Table', '-', 'Styles', 'Format','Font','FontSize', '-', 'TextColor', 'BGColor', 'Source'] }

Utiliser FOSCKEditor

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

$builder
->add('titre', TextType::class)
->add('content', CKEditorType::class) // Ce champ sera remplacé par un éditeur WYSIWYG

Mettre en place l'upload d'images

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

composer require helios-ag/fm-elfinder-bundle

Nous devons maintenant installer le javascript du bundle. Lançons la commande suivante

symfony console elfinder:install

Pour configurer elfinder, nous allons ouvrir le fichier fm_elfinder.yaml et y insérer le code suivant

fm_elfinder:
assets_path: /assets # chemin des fichiers JS
instances:
default:
locale: fr # Langue
editor: ckeditor # Editeur utilisé
fullscreen: true # Taille d'affichage
theme: smoothness # Thème à utiliser
include_assets: true # Charge automatiquement les fichiers nécessaires
connector:
debug: false # Désactive le débug
roots:
uploads:
show_hidden: false # Masque les fichiers cachés
driver: LocalFileSystem # Pilote des fichiers
path: uploads/images # Chemin d'upload
upload_allow: ['image/png', 'image/jpg', 'image/jpeg'] # Fichiers autorisés
upload_deny: ['all'] # Fichiers interdits
upload_max_size: 2M # Taille maximum

Ajouter elfinder à CKEditor

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)

main_config:
toolbar:
- { name: "styles", items: ['Bold', 'Italic', 'Underline', 'Strike', 'Blockquote', '-', 'Link', '-', 'RemoveFormat', '-', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Image', 'Table', '-', 'Styles', 'Format','Font','FontSize', '-', 'TextColor', 'BGColor', 'Source'] }
filebrowserBrowseRoute: elfinder
filebrowserBrowseRouteParameters: []

Et voilà, vous pouvez profiter de l'upload d'images !!

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

4- Installer CKEditor et Elfinder avec Symfony 5.1
Article publié le - Modifié le

Catégories : PHP Symfony Live-Coding symfony5

Mots-clés : Symfony Live-Coding symfony5 ckeditor elfinder

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn