Tutoriel : Ajouter un gestionnaire de fichiers à CKEditor avec Symfony2

Elliott Chiaradia |05-12-2015

CKEditor est un outil complet, cependant, il laisse à désirer pour tout ce qui est des images. Car effectivement, on peut rajouter facilement des images qui sont déjà présentes sur un serveur, en indiquant simplement son URL mais pour ce qui est des images se trouvant sur votre ordinateur, il n’y a pas moyen de les uploader sans devoir installer un outil supplémentaire.

Cet outil supplémentaire peut s'appeler "FMElfinderBundle" par exemple ! FMEIfinderBundle est un bundle symfony2 permettant d’uploader facilement nos fichiers sur le serveur afin de pouvoir les ajouter à nos contenus, un outil très pratique et quasiment indispensable pour tous projets symfony2 étant doté d'une gestion de contenu.

Voilà à quoi ressemble notre futur filemanager, pas mal non ?

Les prérequis pour pouvoir suivre ce tutoriel, et l'intégration de CKEditor dans votre projet symfony2, comme expliqué dans ce tutoriel.

1. Installation de FMElfinderBundle

Pour installer FMElfinderBundle, vous devez ouvrir le fichier composer.json et rajouter la ligne suivante :

"require": {
            …
            "helios-ag/fm-elfinder-bundle": "~5"
}

Ouvrez le fichier app/AppKernel.php puis rajoutez le code suivant :

$bundles = array(
            …
            new FM\ElfinderBundle\FMElfinderBundle(),
) ;
…
"config": {
        "bin-dir": "bin",
        "component-dir": "web/assets"
    },

Il ne vous reste plus qu’à effectuer la commande suivante dans votre invite de commande.

composer update helios-ag/fm-elfinder-bundle

2. Configuration de FMElfinderBundle

On va commencer par modifier le fichier app/config/config.yml.

fm_elfinder:
    instances:
        default:
            locale: %locale% # defaults to current request locale
            editor: ckeditor # other options are tinymce, tinymce4, form, custom and simple
            fullscreen: true # defaults true, applies to simple and ckeditor editors
            theme: smoothness # jquery theme
            include_assets: true # disable if you want to handle loading of the javascript and css assets yourself
            connector:
                debug: false # defaults to false
                roots:       # at least one root must be defined
                    uploads:
                        show_hidden: false # defaults to false
                        driver: LocalFileSystem
                        path: uploads/img/filemanager
                        upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
                        upload_deny: ['all']
                        upload_max_size: 2M

ivory_ck_editor:
    default_config: default
    configs:
        default:
            filebrowserBrowseRoute: elfinder
            filebrowserBrowseRouteParameters: []

Le path contient le répertoire où seront stockées les images. Dans cet exemple, elles seront stockées dans web/uploads/img/filemanager.

Si vous le voulez, vous pouvez gérer la route du filebrowser directement dans le formulaire. Personnellement, je préfère le faire une seule et unique fois dans config.yml.

->add('content', 'ckeditor', array(
            'config' => array(
                'filebrowserBrowseRoute' => 'elfinder',
                'filebrowserBrowseRouteParameters' => array('instance' => 'default')
                ),
            ))

Si vous testez la fonctionnalité en l'état, vous verrez qu’il y a une erreur au niveau des routes. En effet, vous devez rajouter la route utilisée par le gestionnaire d’images. Pour ce faire, rendez-vous dans votre fichier routing.yml et ajoutez-y le code suivant :

elfinder:
     resource: "@FMElfinderBundle/Resources/config/routing.yml"

À cette étape-là, votre code devrait fonctionner. Si ce n’est pas le cas et que vous avez un problème avec vos assets (et donc les chemins des appels qui se font dans vos helpers sont eronnés), essayez la commande suivante :

php app/console asset:install

S’il charge toujours des chemins incorrects, il vous suffit de modifier le fichier config.yml en rajoutant l’asset_path juste en dessous du fm_elfinder, comme ceci :

fm_elfinder:
    assets_path: /web/assets
…

Si vous voulez restreindre l’accès au gestionnaire d’images (ce qui me semble être une très bonne idée afin d'éviter que n'importe qui upload/modifie vos images !), vous devez modifier le fichier app/config/security.yml.

security :
    access_control:
        - { path: ^/efconnect, role: ROLE_ADMIN }
        - { path: ^/elfinder, role: ROLE_ADMIN }

Dans l’exemple ci-dessus, seuls les admins pourront accéder au gestionnaire d’images.

Conclusion

Vous êtes dorénavant capable d'intégrer un gestionnaire de fichiers à CKEditor dans vos projets Symfony2 ! Pour aller plus loin, je ne peux que vous inviter à lire mes autres tutoriels sur le sujet.

Série CKEditor et Symfony2 :

Intégrer CKEditor avec Symfony2
Ajouter un gestionnaire de fichiers à CKEditor avec Symfony2
Intégrer un colorateur syntaxique