Série – Créez un blog avec Symfony

#2 Mettez en forme vos articles avec CKEditor et elFinder

Découvrons ensemble comment formatter le contenu de vos articles

3 oct. 2020 à 13:27 – 9min


Table des matières

Bonjour et bienvenue dans ce nouvel article consacré à la création d'un blog avec Symfony. Aujourd'hui, nous allons voir ensemble comment mettre en place un formulaire qui vous permettra de formatter le contenu de vos articles à votre guise. Nous verrons également comment ajouter des images dans le corps de vos articles très facilement.

Utilisation de CKEditor

Allons-y, installons le bundle CKEditor pour Symfony :

symfony composer require friendsofsymfony/ckeditor-bundle

Le bundle nécessite le téléchargement d'assets (comme les feuilles de style), qui ne sont pas fournies directement avec l'installation via Composer. Pour les télécharger, une commande est prévue à cet effet :

symfony console ckeditor:install

Une fois les assets téléchargés, il ne reste plus qu'à les installer :

symfony console assets:install

Le bundle est maintenant prêt à être utilisé ! Pour notre exemple, nous allons l'intégrer à notre panneau d'administration EasyAdmin, que nous avons configuré dans un article précédent. Néanmoins, il est tout à fait possible d'intégrer CKEditor dans n'importe quel formulaire de votre site. Rendez-vous donc dans un CrudController, puis modifiez-le comme ceci : 

Quelques explications s'imposent. D'abord, nous configurons les champs du formulaire via la fonction configureFields en indiquant un champ content, qui devra utiliser la classe CKEditoryType. Cette classe est fournie par le bundle CKEditor. Il faut également indiquer à notre controller que l'on souhaite intégré le thème nécessaire à l'utilisation de CKEditor, via la fonction configureCrud.

Et voilà ! Vous pouvez maintenant essayer votre formulaire, celui-ci devrait afficher notre nouvel éditeur wysiwyg !

Personnalisation de CKEditor

Configuration de la toolbar

Vous l'avez sûrement remarqué, l'éditeur par défaut de CKEditor fournit une multitude d'options dont vous n'aurez peut-être pas besoin. Rassurez-vous, il est tout à fait possible d'épurer son interface et de la personnaliser à votre guise. 

Pour celà, je vous invite à visiter le configurateur en ligne de CKEditor, qui vous permettra d'activer, de désactiver, et de mettre en ordre toutes les options disponibles pour l'éditeur. Une fois que vous aurez terminé votre configuration, il vous faudra retranscrire le résultat en yaml dans le fichier de configuration config/packages/fos_ckeditor.yaml. Cette opération peut être assez fastitieuse, je vous l'accorde. C'est pourquoi je vous propose ma configuration, que vous pourrez simplifier comme vous le souhaitez si besoin :

Voilà, vous pouvez maintenant raffraichir votre formulaire, l'éditeur CKEditor a changé de configuration !

Personnalisation des styles

Il est également possible de créer vos propres styles, afin de personnaliser vos articles à votre guise. Cela se passe encore une fois dans le fichier de configuration de CKEditor :

Dans cet exemple, je définis deux types de styles différents. Dans le premier cas, il s'agit d'un titre H2 qui sera de couleur bleue. Vous pouvez ajouter à ce style n'importe quel attribut CSS valide. La couleur bleue du texte est passée en tant qu'attribut css dit "inline", c'est à dire que l'élément sera transformé comme celà :

<h2 style="color: blue">Hello world!</h2>

Pour le deuxième style, j'indique qu'il faut ajouter une classe css à l'élément. Ainsi, vous pourrez configurer les attributs CSS de cette classe dans vos feuilles de style. Dans ce cas, l'élément une fois transformé ressemblera à ceci : 

<p class="my_style">Hello world!</p>

Vous pouvez tester ces styles via votre formulaire. Dans le menu déroulant "styles", vous devriez voir les nouveaux styles que vous venez d'ajouter. N'hésitez pas à en créer des nouveaux pour vous entrainer !

Ajouter des plugins

Si les fonctionnalités de base de CKEditor ne vous suffisent pas, vous pouvez le rendre encore plus puissant en lui ajoutant des plugins. 

Pour commencer, rendez-vous sur le site officel de CKEditor lisant les différents plugins recencés. Sur cette liste, cherchez le plugin "wordcount" que nous allons installer dans cet exemple. Il s'agit d'un plugin très simple qui va afficher le nombre de paragraphe et mots dans votre texte. 

Une fois le plugin téléchargé, déplacer le contenu (tout le dossier contenant le fichier plugin.js) dans un dossier public de votre application, par exemple public/plugins/ckeditor. Il suffit maintenant d'ajouter un peu de configuration dans notre fichier fos_ckeditor.yaml

Comme vous le voyez, il faut déclarer les plugins que nous souhaitons utiliser sous la clé "plugins", en donnant le chemin d'accès vers le fichier.js pour chacun de ces plugins. Ensuite, n'oubliez pas de déclarer les plugins à utiliser sous la clé "extraPlugins" de votre configuration. Attention, certains plugins peuvent ajouter des boutons dans la toolbar de CKEditor, auquel cas il faudra également penser à les ajouter dans votre configuration. 

N'hésitez pas à consulter la liste de plugins de CKEditor. Certains de ces plugins me paraissent maintenant indispensable, comme le plugin "autogrow" qui fait en sorte que votre éditeur s'agrandit automatiquement au fur et à mesure que vous tapez du texte, ou encore le plugin "codesnippet" qui vous permet d'ajouter et de formatter automatiquement des morceaux de code dans votre texte. 

Uploader des images avec elFinder

Configuration du bundle

Si vous avez essayer de jouer un petit peu avec votre nouvel éditeur, vous avez sûrement remarqué qu'il n'est pour l'instant possible possible de n'ajouter des images que via des URLs. Nous allons voir comment faire en sorte de pouvoir en ajouter directement depuis notre ordinateur. 

Pour cela, nous allons utiliser le bundle elFinder, qui va vous permettre d'explorer le contenu public de votre application web, à l'instar de l'explorateur de fichiers ou du finder de votre ordinateur.  

Comme d'habitude, commençons par installer ne nouveau bundle :

composer require helios-ag/fm-elfinder-bundle

Il faut maintenant le configurer. Créez un fichier config/packages/fm_elfinder.yaml et ajoutez le code suivant : 

A ce stade, des explications s'imposent. Ce fichier de configuration permet d'indiquer à elFinder les fichiers autorisés (ici, des images) et les fichiers interdits (tout le reste). On indique également une taille maximale par fichier de 2Mo. Grâce à du regex, on peut également restreindre les noms de fichiers acceptés (ici on accepte tout). Enfin, on indique le chemin du dossier où l'on souhaite enregistrer les fichiers qui seront téléchargés. Pour le reste, je vous conseille de regarder du côté de la documentation du bundle si vous souhaitez davantage de personnalisation.  

Maintenant, nous devons faire en sorte que CKEditor puisse utiliser elFinder. Là encore, nous aurons besoin d'un brin de configuration :

Et voilà ! Tout est prêt. Essayez maintenant de recharger votre éditeur et de télécharger une image directement depuis votre ordinateur. Une fois le formulaire validé, votre fichier sera disponible dans le dossier public/uploads/articles de votre application !

Sécuriser les routes

A ce stade, il nous reste encore une étape cruciale à prendre en compte. Pour l'instant, notre application expose une grave faille de sécurité, puisque nous venons d'ouvrir à n'importe qui le système de fichiers de notre application. Essayez, sans être authentifié, d'accéder à la page /elfinder. Vous pouvez y accéder sans problème, et télécharger n'importe quel fichier ! Bon, nous sommes d'accord, nous avons fait en sorte de ne pouvoir télécharger que des images inférieures à 2Mo, mais cela reste quand même impensable. 

Nous allons donc faire en sorte que les routes propres à elfinder soient accessibles aux administrateurs seulement. Si vous avez suivi le tutorial consacré à la sécurité avec Symfony, vous savez que cela ne prendra qu'une seule ligne de configuration. Rendez-vous dans le fichier config/packages/security.yaml, et ajoutez ces deux nouvelles lignes sous la propriété access_control : 

Et voilà, si vous essayez à nouveau d'accéder à la page /elfinder, l'accès vous est bloqué ! Essayez à nouveau en étant authentifié, et tout fonctionne !