Accueil Blog A propos Contact Connexion
Retour à la liste des articles Intégrer CKEditor dans EasyAdmin

Intégrer CKEditor dans EasyAdmin

Olivier Prieur | il y a 2 ans | il y a 6 jours Développement web | 4 | 7133

Installation d'EasyAdmin :

composer req admin

Installation de CKEditor :

composer require friendsofsymfony/ckeditor-bundle

Configuration simple et rapide de CKEditor.

Dans le fichier config/packages/fos_ckeditor.yaml :

fos_ck_editor:

     configs:

         main_config:

             toolbar: full




"Activation" du dashboard d'EasyAdmin :

php bin/console make:admin:dashboard

Dès maintenant vous aurez un nouveau dossier dans src/Controller/Admin avec un fichier DashboardController.php

Vous pourrez également créer des CRUD avec la commande :

php bin/console make:admin:crud

Dans ces CRUD, vous pourrez désormais utiliser ->setFormType(CKEditorType::class) pour "activer" CKEditor sur les champs TextEditorField() :

EXEMPLE :

TextEditorField::new('content')->hideOnIndex()->setFormType(CKEditorType::class),

N'oubliez pas le Use :

use FOS\CKEditorBundle\Form\Type\CKEditorType;

Sous la function configureFields() du CrudController, ajoutez :

public function configureCrud(Crud $crud): Crud

 {

   return $crud

       ->addFormTheme('@FOSCKEditor/Form/ckeditor_widget.html.twig');

 }


 Et voila : CKEDitor est activé dans EasyAdmin !

Olivier Prieur

Olivier Prieur

Geek quinqua nivernais fan d'ovalie, de musique, de linuxeries et de Net.
Portfolio : https://www.olivierprieur.fr

Commentaires

En soumettant ce formulaire, j’accepte que ce site conserve mes données personnelles via ce formulaire. Aucune exploitation commerciale ne sera faite des données conservées.

Horn

il y a 2 ans

Bonjour,
Il manque l'installation des assets dans votre procédure.
Sinon moi j'ai un pb avec ckeditor lors de la validation du texte ça m'affiche le texte avec toutes les balises...
Je suis sur symfony6 et easyAdminBundle

citizenz7

il y a 2 ans

@Horn,
Salut,
Pour les assets : le but n'était pas ici de présenter l'install complète de CKEditor mais sa configuration dans Easyadmin.
Pour ce qui est des balises et du texte, c'est normal. CKEditor ajoute des balises HTML type <p>, <div>, etc.
Pour l'affichage dans la vue (fichier twig), il faut utiliser le filtre twig |raw
Exemple : {{ article.presentation|raw }}

Venkman

il y a 1 an

Bonjour,
Merci pour l'article.
Pouvez vous nous expliquer comment intégrer la déclaration de CKEditor dans la fonction ConfigureFields svp?

citizenz7

il y a 1 an

@Venkman

Il faut ajouter un setFormType() dans configureFields() pour les champs texte :
->setFormType(CKEditorType::class)

N'oubliez pas d'ajouter également un addFormTheme dans configureCrud() :
->addFormTheme('@FOSCKEditor/Form/ckeditor_widget.html.twig')

... et n'oubliez pas d'importer le Use :
use FOS\CKEditorBundle\Form\Type\CKEditorType;

A la une

Utiliser TailwindCSS dans un projet Symfony 7

Lire l'article

Symfony 7 avec Docker

Lire l'article

Customiser Easyadmin (2) : avec AssetMapper

Lire l'article

Je recherche un nouveau job !

Lire l'article

Les plus lus

Symfony : barre de recherche dans la sidebar 19381

Lire l'article

Débuter avec Symfony 5 : le fichier .env 11924

Lire l'article

VSCode : 10 raccourcis clavier indispensables (Linux) 11588

Lire l'article

GIT / GITHUB : aide-mémoire pour "les nuls" 10189

Lire l'article