Temps de lecture : 14 minutes environ.
Article déprécié
Raison: A ce jour, les informations ci-dessous s'appliquent jusqu'à la version 4.3 de Symfony.
Vous avez créé un site avec Symfony 4 et souhaitez ajouter une fonctionnalité d'édition de texte avec un éditeur WYSIWYG (What You See Is What You Get) ?
Vous avez besoin d'ajouter des images dans cet éditeur ?
Cet article va traiter de l'ajout de CKEditor à un projet Symfony 4 et de l'upload d'images dans CKEditor.
ATTENTION : A ce jour, les informations ci-dessous s'appliquent jusqu'à la version 4.3 de Symfony.
Qu'est CKEditor ?
CKEditor est un éditeur WYSIWYG qui peut facilement être intégré à tout site web dans les formulaires divers. Il apporte de nombreuses fonctionnalités d'édition et de nombreux plugins.
Il est disponible en téléchargement pour tout projet sur le site officiel, et adapté à Symfony par le groupe "Friends of Symfony", sous le nom FOSCkeditor.
Installer CKEditor
Pour procéder à l'installation de FOSCkeditor, nous allons utiliser le terminal et composer.
La 1ère commande à entrer dans le terminal va récupérer CKEditor et l'intégrer à Symfony et au dossier vendor.
Il faudra ensuite télécharger les ressources nécessaires au fonctionnement de CKEditor (HTML, CSS, Javascript) et les installer.
composer require friendsofsymfony/ckeditor-bundleEnfin, nous allons installer toutes les ressources nécessaires dans le dossier "public"
php bin/console ckeditor:installVoilà CKEditor maintenant installé.
php bin/console assets:install publicConfigurer CKEditor
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 CKEditor
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 "AjoutArticleType.php" de notre projet
$builder
->add('titre', TextType::class)
->add('contenu', CKEditorType::class) // Ce champ sera remplacé par un éditeur WYSIWIG
->add('featured_image', FileType::class, [
'label' => 'Image'
])
->add('categories', EntityType::class, [
'class' => Categories::class,
'multiple' => true,
'expanded' => true
])
->add('mots_cles', EntityType::class, [
'class' => MotsCles::class,
'multiple' => true,
'expanded' => true
])
->add('Publier', SubmitType::class)
;
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 ^9.3Notez la mention "^9.3" qui force les versions 9.3.x pour être compatible avec Symfony 4.3. Pour la version 4.4 ou 5, retirez cette mention.
Nous devons maintenant installer le javascript du bundle. Il a été ajouté dans le dossier "components". Nous allons copier ce dossier dans "/public" et le renommer "assets".
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 maximumAjouter 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
