Utiliser CKEditor avec Symfony 4 (avec upload d'images)

20 janvier 2020 - : MVC Tutoriel Symfony - : 17 commentaires - Tutoriel Controllers Framework Généralités MVC Views Symfony

Visualisez les fichiers de cette série sur GitHub

Dernière modification le 22 janvier 2020

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-bundle

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

php bin/console ckeditor:install

Voilà CKEditor maintenant installé.

php bin/console assets:install public

Configurer 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.3

Notez 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 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

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

abdel a écrit le 24 mai 2020 à 21:44

Bonjour je vous remercie pour votre tuto ,mais malheureusement par ma quand je clique sur parcourir le serveur cela ouvre bien une fenêtre,mais il a rien qui s'affiche pourrais vous m'aider s'il vous plait

Répondre

Nouvelle-Techno.fr a répondu le 24 mai 2020 à 21:48

Bonsoir,

Pour ce genre de problème, Discord (https://discord.gg/azQ9sbD) est plus adapté que les commentaires des articles.

Répondre

Imaria a écrit le 24 mai 2020 à 20:55

Merci pour cet article :) Je cherchais une façon simple et rapide de réaliser l'upload d'images avec Ckeditor, ça fera parfaitement l'affaire l

Répondre

Nouvelle-Techno.fr a répondu le 24 mai 2020 à 21:04

Merci beaucoup !!

Répondre

Blutch70 a écrit le 10 avril 2020 à 15:27

Merci !

Répondre

Nouvelle-Techno.fr a répondu le 24 mai 2020 à 21:04

Merci beaucoup !!

Répondre

Ahmed Ahmed a écrit le 15 mars 2020 à 20:36

Bonjour et merci pour cet article.

ça fait longtemps que je travaille avec Ckeditor et elfinder avec Symfony3 et ça marche bien , mais j'ai quelques questions à vous poser, j'ai plusieurs articles et pour chaque article il faut uploder plusieurs images , donc la gestion de ces articles est difficiles.

s.v.p comment je peux faire système de gestion des images pouch chaque article au niveau de dossiers , uploads/images/article1 ,uploads/images/article2 ,.....

Merci d'avance.

 

 

Répondre

tonius a écrit le 22 février 2020 à 00:34

Super merci pour ce tuto.

 

Sur symfony 5 après avoir executé :

composer require helios-ag/fm-elfinder-bundle

 

Il est possible plutôt que de créer un dossier asset d'executer directement la commande :

php bin/console elfinder:install

 

Ensuite une erreur est apparue pour ma part (et pour d'autres personnes également) :

Unrecognized option "include assets" under "fm elfinder.

 

Pour que tout refonctionne il suffit de commenter ou supprimer le include_assets du fichier fm_elfinder.yaml

 

Normalement tout devrait être bon j'ai testé et cela fonctionne

Répondre

Nouvelle-Techno.fr a répondu le 22 février 2020 à 07:51

Bonjour, merci beaucoup 👍

Répondre

MickY511 a écrit le 5 février 2020 à 10:50

Bonjour,
Comment faire pour que le contenue generer soit interpreter car je n'arrive pas a lui faire interpreter les balises dans mon twig

exemple il m'affiche sur ma page : <p>test <strong>ck editor</strong></p> au lieu de ck editor

Merci d avance de votre réponse

Cordialement

Micky511

Répondre

Nouvelle-Techno.fr a répondu le 5 février 2020 à 15:38

Bonjour,

Supposons que le contenu est dans une variable appelée "contenu".

Dans le fichier Twig, il faudra l'appeler de cette façon

{{ contenu|raw }}

 

Répondre

Vicc a écrit le 4 février 2020 à 17:30

Bonjour,

Où se situe le dossier components ?

Je ne le trouve pas en effectuant une recherche...

Merci.

Répondre

Nouvelle-Techno.fr a répondu le 4 février 2020 à 17:38

Bonsoir,

Le dossier components est automatiquement créé lors de l'installation de elfinder au moyen de la commande

composer require helios-ag/fm-elfinder-bundle ^9.3

 

Répondre

Okhodo a écrit le 1 février 2020 à 21:57

Bonjour,

Merci à vous pour le temps que vous prenez afin de nous aider à mieux apprehender Symfony.

Je viens vers vous car je n'arrive pas à configurer CKEditor avec Symfony 5.

Vous-êtes t'il possible de nous édifier dessus.

Encore merci. 

Répondre

Nouvelle-Techno.fr a répondu le 1 février 2020 à 22:22

Bonsoir,

Merci à vous de prendre le temps de commenter.

Je n'ai pas encore testé Symfony 5 en raison des multiples extensions qui posent problème, je ne serai donc pas capable d'aider dans l'immédiat.

Répondre

renus a écrit le 28 janvier 2020 à 18:17

Pile ce que je cherchai, un grand merci ! 

Répondre

Nouvelle-Techno.fr a répondu le 1 février 2020 à 22:20

Je vous en prie, merci à vous

Répondre

Ecrire un commentaire