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 !

 

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

 

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"