17 - Upload d'images dans CKEditor 5 avec SimpleUpload (Symfony 7)

Série : Symfony 7

Fichiers : https://github.com/NouvelleTechno/OpenBlog

Dans ce tutoriel, nous allons configurer CKEditor 5 pour permettre l’ajout d’images directement depuis notre éditeur, avec un upload qui enregistre les images sur le serveur. Cette fonctionnalité enrichit l’expérience utilisateur en offrant la possibilité d’intégrer des images au sein du contenu textuel. Nous utiliserons le plugin Simple Upload Adapter de CKEditor 5 pour gérer les uploads, et créerons un contrôleur Symfony pour traiter les images et les stocker.

Configuration des Plugins d’Images dans CKEditor

Ajout des plugins d’image
Dans le fichier de configuration ckeditor-init.js, ajoutez les plugins d’image nécessaires :

• ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, et SimpleUploadAdapter.

Ajout des plugins au menu
Dans la section toolbar.items, ajoutez l’option insertImage. Cela affiche un bouton dans la barre d’outils CKEditor pour insérer une image depuis une URL ou un fichier local. Par exemple :

toolbar: {

    items: [ 'heading', 'bold', 'italic', 'insertImage', 'link' ],

}

Déclaration des plugins
Après avoir ajouté les plugins dans toolbar.items, veillez à les ajouter également dans la section plugins, ce qui rendra ces fonctionnalités disponibles pour CKEditor :

plugins: [

    'Image', 'ImageToolbar', 'ImageUpload', 'SimpleUploadAdapter', // autres plugins...

]

Configuration de Simple Upload pour le Téléchargement d’Images

Définition de l’URL d’upload
Ajoutez une configuration spécifique pour SimpleUploadAdapter :

simpleUpload: {

    uploadUrl: '/api/file/upload',

}

Cette URL /api/file/upload sera celle vers laquelle CKEditor enverra l’image. À ce stade, cette route n’existe pas encore. Nous allons donc la créer.

Création d’un Contrôleur Symfony pour Gérer l’Upload d’Images

Créer un contrôleur d’API
Dans votre projet Symfony, créez un dossier API dans src/Controller et ajoutez-y un fichier FileUploadController.php :

<?php

namespace App\Controller\Api;

use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;

use Symfony\Component\HttpFoundation\JsonResponse;

use Symfony\Component\HttpFoundation\Request;

use Symfony\Component\Routing\Attribute\Route;

use Symfony\Component\Routing\Generator\UrlGeneratorInterface;

#[Route('/api', name: 'api_')]

class FileUploadController

{

    public function __construct(

        private readonly ParameterBagInterface $params,

        private readonly UrlGeneratorInterface $router

    )

    {}

    #[Route('/file/upload', name: 'file_upload', defaults: ['_format=json'], methods:['post'])]

    public function fileUpload(Request $request): JsonResponse

    {

        $fichier = $request->files->get('upload');

        $ext = explode('.', strtolower($fichier->getClientOriginalName()));

        $extension = end($ext);

        $newName = md5(uniqid()) . '.' . $extension;

        $path = $this->params->get('uploads_directory') . 'content/';

        if(!file_exists($path)){

            mkdir($path, 0755, true);

        }

        $fichier->move($path, $newName);

        $link = $this->router->generate('app_main', [], UrlGeneratorInterface::ABSOLUTE_URL) . 'uploads/content/' . $newName;

        $response = ['url' => $link];

        return new JsonResponse($response);

    }

}

Ce code :

• Vérifie l’existence d’un fichier reçu via le champ upload.
• Déplace le fichier dans un dossier uploads/content/.
• Génére une URL complète pour l’image, basée sur l’URL de votre page d’accueil, qui sera utilisée dans CKEditor pour afficher l’image dans le contenu.

Ajouter la configuration dans services.yaml
Si le contrôleur n’utilise pas AbstractController, il est nécessaire de le déclarer manuellement. Ajoutez la configuration suivante dans services.yaml :

services:

    App\Controller\API\:

        resource: '../src/Controller/API'

        tags: ['controller.service_arguments']

Vérification des Permissions
Vérifiez que le dossier de destination (par exemple, uploads/content/) est accessible en écriture par Symfony.

Test et Vérification

Tester l’upload d’une image
Rechargez la page d’édition d’article dans votre application Symfony et essayez de télécharger une image en utilisant le bouton d’insertion d’image. Si tout est correctement configuré, l’image devrait apparaître dans l’éditeur et être stockée dans uploads/content/ sur le serveur.

Vérification des données dans la base
Vérifiez que le contenu de l’article enregistre le code HTML de l’image avec la balise <img> et le chemin vers l’image stockée.

Problème de Suppression des Images

Actuellement, CKEditor 5 ne propose pas de suppression automatique des images qui ont été insérées et ensuite supprimées du contenu. Pour gérer cela, vous pouvez développer un service de nettoyage périodique :

• Parcourez les contenus de la base de données et comparez les chemins d’image.
• Supprimez les images obsolètes non référencées dans les articles.

Conclusion

En suivant ce tutoriel, vous avez configuré CKEditor 5 pour permettre aux utilisateurs d’ajouter des images dans leurs articles. Cette fonctionnalité améliore l’édition en permettant une gestion complète de l’insertion d’images, directement accessible depuis l’éditeur. Toutefois, pour une gestion optimale des images, la mise en place d’un service de nettoyage périodique est conseillée.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.