Installer CKeditor5 dans Easyadmin : une solution pas à pas

Problème

Easyadmin est une solution de zone d’administration pour une application web, basé sur des CRUD (Create, Read, Update, Delete) pour les différents objets métiers (les utilisateurs, les articles d’un blog, les clients, etc.).

Ces objets métier peuvent être caractérisés par un contenu texte sous la forme de code html mis en forme, pour mettre du contenu en italique, en gras, ou pour définir un hyperlien.

Il existe des éditeurs en javascript pour réaliser cette mise en forme d’une façon pratique pour un utilisateur. Easyadmin Ouvre une nouvelle fenêtreintègre d’ailleurs une bibliothèque javascript pour cette fin : Ouvre une nouvelle fenêtreTrix. S’il a l’avantage d’être léger et simple, cet éditeur peut manquer de fonctionnalités avancées comme l’upload de média.

C’est pourquoi nous allons mettre en place Ouvre une nouvelle fenêtreCKEditor pour remplir cette fonction.

À l’heure où nous écrivons cet article, la version d'EasyAdmin est la 4.11 et celle de CKEditor est la 42.0. Mais il est fort probable que la méthode fonctionne avec les versions ultérieures.

Pour les versions plus anciennes de CKEditor, il existe un Ouvre une nouvelle fenêtrebundle symfony pour avoir un élément de formulaire de type WYSIWYG. Mais il ne prend pas un charge CKEditor 5, qui par ailleurs est plus simple à utiliser. Nous allons donc l’installer et le configurer manuellement, ce qui nous donnera toute l’amplitude de personnalisation proposée par CKEditor.

Prérequis

Nous considérerons que Symfony est installé avec EasyAdmin et fonctionnel, et que qu’un Crud pour un objet Post est disponible, incluant un champ Content stockant du HTML.

Fonctionnement de base

Pour la gestion de dépendances javascript, nous utiliserons la solution qui est poussée par Symfony et qui a l’avantage d’être indépendant de Nodejs : Ouvre une nouvelle fenêtreAssetMapper. Elle est installée par défaut avec tout projet Symfony récent.

Nous installons donc CKEditor via la commande

Asset mapper fonctionne selon le principe qu’un fichier doit servir de point d’entrée pour utiliser différents composants. Nous ajoutons maintenant la définition de cet entrypoint dans la configuration des assets, le fichier

Créons maintenant ce fichier à l’emplacement

Il nous reste maintenant à configurer le champ dans le contrôleur easyadmin

Et voilà un champ gérer par CKEditor pour un beau WYSIWYG :) Par contre, on se retrouve avec l’éditeur de base, que nous voulons justement personnaliser …

Personaliser

La personnalisation de CKEditor se fait en passant un objet en paramètre. Nous vous proposons cette configuration très complète.

Voilà un éditeur vraiment complet.

À présent, on peut aussi définir deux configurations différentes. Par exemple, on pourrait ajouter une version mini avec uniquement la mise en forme des textes. Nous pouvons la définir et l’appliquer à d’autres contextes.

Pour utiliser cette configuration alternative, il suffit de la préciser dans le contrôleur :

En bonus : upload de media

L’upload de media depuis l’interface de WYSIWYG est une fonctionnalité vraiment pratique pour y intégrer des médias directement. CKEditor gère justement cette fonctionnalité. On va commencer par indiquer à CKEditor l’URL pour uploader les médias :

Et voici le contrôleur Symfony associé qui renvoie la réponse attendue par ce «SimpleUploadAdapter» pour faire son travail correctement.

Le mot de la fin

Finalement, nous avons vu que brancher la version 5 de CKEditor sur l’EasyAdmin basé sur Symfony est simple et hautement personnalisable. Parfois, ça vaut le coup de faire ce type de liaison soi-même et ne pas chercher un bundle ou une extension pour réaliser des liaisons finalement simples.