Intégrer un éditeur WYSIWYG dans Symfony 6 (CKEditor)

Intégrer un éditeur WYSIWYG (What You See Is What You Get) dans un projet Symfony est quelque chose de relativement simple.
Nous utiliserons ici la librairie CKEditor qui répond parfaitement à ce besoin, nous verrons comment l'intégrer dans un simple formulaire ou encore dans EasyAdmin.
Aussi, nous verrons comment configurer la barre d'outil de l'éditeur, en utilisant des presets ou encore des plugins que nous propose le builder online de CKEditor.

 


Installation du bundle CKEditor

 

Installation du bundle Symfony CKEditor depuis composer :
 

composer require friendsofsymfony/ckeditor-bundle


Assurez-vous que le bundle est bien inscrit dans le fichier bundles.php, sinon rajoutez-le :
 

<?php

return [
    // ...
	FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true],
];


Il faut ensuite télécharger la dernière version de CKEditor à l'aide d'une commande du bundle Symfony :
 

php bin/console ckeditor:install


Puis pour finir il faut envoyer CKEditor (le dossier installé précédemment qui contient tous les assets) dans le dossier public de notre projet Symfony :
 

php bin/console assets:install public



Intégration de CKEditor dans un formulaire classique

 

Pour obtenir l'éditeur dans un formulaire, il suffit de créer un nouveau champ avec le type CKEditorType :
 

<?php

namespace App\Form\Type;

use FOS\CKEditorBundle\Form\Type\CKEditorType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class PostEditType extends AbstractType {
    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder
            ->add('title', TextType::class, [
                'label' => 'Titre',
            ])
            ->add('content', CKEditorType::class)
            ->add('submit', SubmitType::class, [
                'label' => 'Envoyer',
            ]);
    }
}


Chargez ce formulaire et vous devriez voir apparaître votre nouvel éditeur WYSIWYG !

 

Premier affichage de CKEditor, barre d'outil au format full



Intégration de CKEditor dans EasyAdmin
 

Si vous utilisez un backoffice EasyAdmin, l'intégration de l'éditeur peut se faire de la façon suivante :
 

<?php

// ...
use FOS\CKEditorBundle\Form\Type\CKEditorType;
// ...

class PostCrudController extends AbstractPostTypeCrudController
{
    // ...

    public function configureFields(string $pageName): iterable
    {
        return [
            // ...
            TextEditorField::new('content', 'Contenu')->setFormType(CKEditorType::class),
            // ...
        ];
    }
}



Configuration de CKEditor
 

Lors de votre premier affichage de l'éditeur, vous remarquerez que la barre d'outil est très chargée. Peut-être trop chargée !
La largeur, la hauteur ou encore d'autres paramètres de l'éditeur peuvent ne pas vous convenir.
Naturellement, une configuration est possible pour que vous soyez en confort avec votre nouvel éditeur et c'est ce que ce nous allons voir dans cette section.
Nous travaillerons dans le fichier config/packages/fos_ckeditor.yaml.


Configuration de la barre d'outil
 

Pour une configuration simple et rapide, des presets de la barre d'outil comme basic, standard ou encore full peuvent être appliqués comme suit :
 

# config/packages/fos_ckeditor.yaml
fos_ck_editor:
    configs:
        main_config: 
            toolbar: standard

 

Configuration CKEditor au format standard.


Mais vous voudrez surement ajuster vous-même votre configuration outil par outil.
Petit cadeau, voici la configuration de barre d'outil que j'utilise personnellement sur hugoderre.com :
 

# config/packages/fos_ckeditor.yaml
fos_ck_editor:
    configs:
        main_config:
            allowedContent: true # Désactive le filtrage dans le code source, par exemple sur l'ajout de propriété HTML
            height: 850 # Hauteur
            width: 1000 # Largeur
            toolbar:
                - {
                    name: "styles",
                    items: 
                      [
                        "Bold",
                        "Italic",
                        "Underline",
                        "Strike",
                        "CodeSnippet", 
                        "Code",
                        "Blockquote",
                        "-",
                        "Link",
                        "-",
                        "RemoveFormat",
                        "NumberedList",
                        "BulletedList",
                        "-",
                        "Outdent",
                        "Indent",
                        "-",
                        "-",
                        "JustifyLeft",
                        "JustifyCenter",
                        "JustifyRight",
                        "JustifyBlock",
                        "-",
                        "Image",
                        "Table",
                        "-",
                        "TextColor",
                        "BGColor",
                        "HorizontalRule",
                        "/",
                        "Styles", "Format", "Font", "FontSize", "Source",
                      ]
                  }


À savoir que CodeSnippet et Code sont des plugins CKEditor, une configuration supplémentaire est requise pour pouvoir les utiliser (rendez-vous à la prochaine section pour ajouter des plugins 😏).
Personnellement il y a tout ce dont j'ai besoin pour écrire mes articles, un vrai bonheur au quotidien. Libre à vous d'ajouter ou de retirer des éléments !


Ajout de plugins CKEditor
 

Dans la section précédente, nous avons vu que certains composants de la barre d'outils, comme CodeSnippet et Code, venaient de plugins externes au package de base CKEditor. Vous apprendrez ici comment les ajouter à votre configuration.

CodeSnippet permet d'écrire des blocs de code directement dans notre éditeur. Son implémentation par défaut intègre la librairie highlight.js. Si vous souhaitez que la colorisation syntaxique de highlight.js soit visible autre part que dans le rendu visuel de CKEditor alors vous devrez y importer vous même la librairie, si cela vous intéresse j'ai déjà écris un article sur l'intégration de highlight.js.
 

console.log('Extrait de code écrit depuis le plugin CodeSnippet !')


CodeTag permet d'encadrer des mots s'apparentant à du code => console.log('Comme cela').


Nous allons voir ici comment rajouter ces deux éléments dans notre barre d'outil grâce aux plugins :
 

  1. CKEditor dispose d'un builder online qui permet de recréer un package contenant tous les plugins que vous aurez décidé d'y installer. Créez donc un nouveau package CKEditor au format full et en y ajoutant les plugins CodeSnippet et CodeTag.
  2. Une fois le fichier zip téléchargé, vous devez y extraire le dossier ckeditor dans votre projet Symfony dans le dossier public/bundles.
  3. Enfin, vous devez indiquer à votre fichier de configuration fos_ckeditor.yaml le chemin relatif vers le nouveau dossier ckeditor fraichement installé :
     
# config/packages/fos_ckeditor.yaml
fos_ck_editor:
    base_path: "bundles/ckeditor"
    js_path:   "bundles/ckeditor/ckeditor.js"


Editeur CKEditor complètement configuré, fin de l'article.


D'autres articles à découvrir :

22 commentaires

Avatar de l'auteur du commentaire
VDev/S
16 mai 2024, 16:37:09
J'avais le meme problème de licence avec CKEditor 4 et le FOS CKE bundle; Solution : php bin/console ckeditor:install --tag=4.12.1

Répondre
Avatar de l'auteur du commentaire
p.VLI
12 mars 2024, 09:53:57
Bonjour j'utilise le bundle sur mon projet symfony et soudainement un erreur disant que j'ai besoin d'une "license key" est apparue. Je n'ai plus accès au bundle et j'ai seulement un input simple à la place dans mon formulaire: "he license key is missing or invalid. If you suddenly started to see this message, this may mean you accidentally updated CKEditor 4 to the LTS version (4.23.0 and above). This version of the editor is under commercial terms and requires acquiring an "Extended Support Model" contract - https://ckeditor.com/ckeditor-4-support/ For more information about this error go to https://ckeditor.com/docs/ckeditor4/latest/guide/dev_errors.html#invalid-lts-license-key" j'ai besoin d'aide svp, merci!

Répondre
Avatar de l'auteur du commentaire
Julien
29 avr. 2024, 12:51:03
J'ai exactement le même problème J'ai essaye les solution en passant par la 4.22.1 mais rien n'y fait

Répondre
Avatar de l'auteur du commentaire
Julien
29 avr. 2024, 12:51:09
J'ai exactement le même problème J'ai essaye les solution en passant par la 4.22.1 mais rien n'y fait

Répondre
Avatar de l'auteur du commentaire
Julien
29 avr. 2024, 12:51:15
J'ai exactement le même problème J'ai essaye les solution en passant par la 4.22.1 mais rien n'y fait

Répondre
Avatar de l'auteur du commentaire
flmts
10 nov. 2023, 14:37:55
Salut, j'ai moi aussi ce problème j'essaye de trouver une solution mais pour l'instant rien, j'utilise php 8.2

Répondre
Avatar de l'auteur du commentaire
Val
8 oct. 2023, 12:00:03
Bonjour, merci pour ce très bon tuto, petite question lors de composer update j'ai le répertoire plugins qui se réinitialise. Est-il possible de bloquer cette suppression ? Merci d'avance

Répondre
Avatar de l'auteur du commentaire
Pierrototo
3 oct. 2023, 21:51:09
Merci Hugo pour ce tuto. En revanche ça ne fonctionne pas chez moi ça me rend fou, le panel ckeditor n'est pas rendu sur la vue, seulement un input text lambda. J'ai cherché de nombreuses solutions et aucune ne fonctionne. Je suis sous php8.1. Quelqu'un a ce problème ? Une idée ?

Répondre
Avatar de l'auteur du commentaire
TeuZ
6 févr. 2024, 12:10:40
Bonjour, j'ai résolu le problème en ajoutant le thème dans la configuration Twig ("config/packages/twig.yaml") : twig: form_themes: - '@FOSCKEditor/Form/ckeditor_widget.html.twig' En espérant que ça débloque la situation.

Répondre
Avatar de l'auteur du commentaire
Nath
23 févr. 2024, 13:28:25
As-tu réglé ton problème ? J'ai le même soucis. Je tourne en rond... Je fais exactement ce que d'autres font dans les tutos sauf que ça n'a absolument aucun effet sur ma vue...

Répondre
Avatar de l'auteur du commentaire
kasali
12 sept. 2023, 13:05:53
Bonjour, Merci pour ce tuto trés clair. Comment afficher le contenu du champ avec les images et la mise en forme appliquée? Je parviens à soumettre le contenu mais la mise en forme ne s'applique pas.

Répondre
Avatar de l'auteur du commentaire
Amine
25 août 2023, 22:58:17
Merci pour ce tuto j'ai cette erreur qui s'affiche !! [CKEDITOR] Error code: invalid-lts-license-key.

Répondre
Avatar de l'auteur du commentaire
alpha
3 sept. 2023, 17:23:28
J'ai le même message d'erreur

Répondre
Avatar de l'auteur du commentaire
Gumbraise
4 sept. 2023, 16:36:03
Same avec PHP 8.2. Par contre avec PHP 8.1 c'est nickel

Répondre
Avatar de l'auteur du commentaire
raditz
7 sept. 2023, 09:56:44
Pareil, ça m'a l'air généralisé

Répondre
Avatar de l'auteur du commentaire
fecou
8 sept. 2023, 04:06:07
Voir https://github.com/FriendsOfSymfony/FOSCKEditorBundle/issues/253 Faire bin/console ckeditor:install --tag=4.22.1 Puis bin/console assets:install

Répondre
Avatar de l'auteur du commentaire
kasali
3 août 2023, 12:58:00
Merci pour ce tuto. J'ai configuré mais je ne peux afficher le contenu. Seul le texte s'affiche. Comment faire pour afficher le contenu(texte + image) avec l'apprence?Merci

Répondre
Avatar de l'auteur du commentaire
yann
2 août 2023, 19:28:16
Juste pour ceux qui passeraient par là et qui aurait toujours une textarea classique dans EasyAdmin après l'installation, il faut ajouter dans le DashboardController, dans la méthode configureCrud : ->setFormThemes(['@EasyAdmin/crud/form_theme.html.twig', '@FOSCKEditor/Form/ckeditor_widget.html.twig'])

Répondre
Avatar de l'auteur du commentaire
raahx
8 juin 2023, 20:29:39
merci, ça marche très bien ! :)

Répondre
Avatar de l'auteur du commentaire
Hugo Derré
15 juin 2023, 16:58:42
Merci pour ton commentaire, au plaisir ! 🚀

Répondre
Avatar de l'auteur du commentaire
raditz
14 mars 2023, 16:42:20
Merci l'ami !

Répondre
Avatar de l'auteur du commentaire
Hugo Derré
19 mars 2023, 22:45:51
Content d'avoir pu t'aider !

Répondre