Intégrer un éditeur ckeditor dans symfony 5 avec code snippet

Mise en abîme de l'article
Article rédigé le : 05/05/2020


Publique visé : Développeurs symfony
Notions requises : Bases en Symfony (3, ou 4 ou 5)
Temps de lecture : 30 minutes
Auteur : Adrien Taïnoff

Introduction

Ce tutoriel se base sur Symfony Flex version 5.0, et la version 2.2 de FOSCkeditorBundle.
Je pars du principe que vous avez déjà un formulaire qui fonctionne, et twig d'installé.

Imaginons que vous vous voulez un éditeur Wysiwyg sur votre site. Eventuellement à plusieurs endroit.
L'idée du Wysiwyg est de remplacer un textarea par un champ qui permet en direct de formater du texte, un peu comme Word.
On pourra agir sur tous les textareas, ou un seul, ou même configurer chaque Wysiwyg d'une autre manière.
Ckeditor est un éditeur qui existe depuis longtemps, il a été récement reprit de Ivory par FriendsOfSymfony, ceux qui ont fait FOSUser entre autre.
 

Installer FOSCkEditorBundle et CKEditor

On installe d'abord le Bundle FOSCKEditorBundle. Vous pouvez suivre la doc Symfony de cette installation du Bundle ou suivre ces étapes moins détaillés :

Installez la dernière version du bundle avec Composer

composer require friendsofsymfony/ckeditor-bundle

Vérifiez que le bundle est inscrit en dernier dans la liste de bundles :

<?php
    /* config/bundles.php */

    return [
    Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
    Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
    Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
    Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true, 'test' => true],
    Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle::class => ['all' => true],
    Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
    Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
    Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
    Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
    FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true]
    ];

Vous avez un nouveau fichier de configuration : fos_ckeditor.yaml. Il permet d'ajouter l'éditeur dans la vue Twig.

# config/packages/fos_ckeditor.yaml
    twig:
    form_themes:
    - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

 

Ensuite, on va installer ckeditor avec une commande Symfony. Vous avez la documentation Symfony ici pour l'installation de ckeditor.

php bin/console ckeditor:install

Puis on installe les assets :

php bin/console assets:install public

Vérifiez que les assets sont bien installées dans /public/bundles/fos_ckeditor.
 

Configurer vos préférences pour votre éditeur, ici la config s'appelle "my_config", l'ensemble de la configuration est présente dans la doc.
Vous pouvez choisir une toolbar avec le package "Basic", "Standard" ou "Full". Vous pouvez aussi choisir les actions spécifiques qui seront affiché dans l'éditeur. Dans cet exemple je me suis limité à ces 4 icônes.

# config/packages/fos_ckeditor.yml
    twig:
    #...
    fos_ck_editor:
    configs:
    my_config:
    language: fr
    uiColor:                "#000000"
    toolbar: [ ["Source", "-", "Save"], "/", ["Anchor"], "/", ["Maximize"] ]

Il ne reste plus qu'à choisir un des champs de formulaires où vous souhaitez intégrer votre éditeur Wysiwyg. Je choisis content qui chez moi est une propriété de type TEXT pour mon orm.
N'oubliez pas d'importer la class en début de fichier avec le USE.

<?php

    namespace App\Form;

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

    class ArticleType extends AbstractType
    {
    /**
    * @param FormBuilderInterface $builder
    * @param array $options
    */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
    $builder

    //vous pouvez personnaliser votre configuration par formulaire
    ->add('content', CKEditorType::class, [
    'config_name' => 'my_config',
    'config'      => array('uiColor' => '#ffffff'),
    ])

    //ou bien simplement ajouter le champ avec la configuration my_config par défaut
    ->add('content', CKEditorType::class)

    //...
    ;
    }

    /* ... */
    }

Un coup d'oeil sur la définition de mon champ content qui contiendra l'éditeur.

/**
    * ...
    */
    class Article
    {
    /**
    * @ORM\Column(type="text")
    */
    private $content;

    /* ... */

Dans votre vue twig de formulaire, il suffit d'ajouter le champ.


    {{ form_row(form.content) }}

Dans votre vue twig de rendu du contenu, il faut penser à ajouter le filtre RAW, sinon le HTML ne sera pas interprêté indecision.

#votre vue, par exmple :

    <div class="container">
    <div class="row">
    {{ article.content|raw }}
    </div>

Et voilà, votre éditeur fonctionne et s'affiche. Si ce n'est pas le cas, n'hésitez pas à partir de 0 en suivant les 3 docs.

 

Construire votre plugin Ckeditor avec CodeSnippet

J'ai perdu du temps à tenter d'installer les plugins à la main, un à un, en vérifiant les dépendances.
On a une config faite pour les plugins, c'est tentant de faire l'utiliser !

fos_ck_editor:
    configs:
    BasicConfig:
    uiColor: "#32473A"
    extraPlugins: "dialogui, dialog, widgetselection, button, notification, toolbar, lineutils, clipboard, widget, codesnippet"

Mais au final, on ne va pas faire comme ça cheeky.
On va utiliser notre propre ckeditor, et modifier la configuration.

Allez sur ce site pour construire votre propre Ckeditor selon les plugins, le thème, et la toolbar que vous souhaitez :

https://ckeditor.com/cke4/builder

Ajoutez le plugin "Code Snippet". Ses dépendances vont s'ajouter automatiquement.
Téléchargez le,  vous obtenez un dossier qui s'appel "ckeditor".

 

Utiliser notre propre Ckeditor

Maintenant on va utiliser cet editeur qu'on a constuit.
On va suivre la doc de symfony Use your own CKEditor.

Supprimez votre dossier /public/bundles/fos_ckeditor, et remplacez le par l'éditeur que vous avez téléchargé /public/bundles/ckeditor_mybuild.

Configurer votre éditeur pour lui préciser que vous avez changé de dossier de bundle.
Vous pouvez renommer "fosckeditor" au lieu de "my_build". Ca marchera. Cependant, je trouve important dans changer le nom de manière à signifier qu'on a personnalisé l'éditeur.

#config/packages/fos_ckeditor.yaml
    fos_ck_editor:
    #par défault le path démarre au dossier /public
    base_path: "bundles/ckeditor_mybuild"
    js_path:   "bundles/ckeditor_mybuild/ckeditor.js"

    #...

Et c'est tout ! Votre éditeur doit à nouveau fonctionner. Vérifiez qu'il contient maintenant tous les plugins que vous avez choisi.
Vérifiez que vous avez bien l'icône code_snippet dans votre toolbar.
Pas besoin de le préciser dans la configuration extraPlugins, il sera inclus tout seul.

 

Configuer votre Code Snippet :)

Dernière étape la plus fun, configurer notre joli rendu d'édition de code.

Côté éditeur

Comme précisé dans la documentation de Code Snippet, côté éditeur vous pouvez préciser le thème et le langage de code.
Si on fait un petit récap, voici à quoi peut ressembler votre configuration :

#config/packages/fos_ckeditor.yaml

    twig:
    form_themes:
    - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

    fos_ck_editor:
    base_path: "bundles/ckeditor_mybuild"
    js_path:   "bundles/ckeditor_mybuild/ckeditor.js"
    configs:
    my_config:
    language: fr
    uiColor: "#32473A"
    codeSnippet_theme: 'monokai_sublime'
    codeSnippet_languages:
    - 'PHP'
    - 'SQL'
    - 'JavaScript'
    - 'Clingon'

Côté rendu

Comme précisé dans cette autre documentation ; il reste à ajouter les appels de styles CSS et fonction JS dans votre vue Twig :


    {% block stylesheets %}
    <!-- ou bien pojoaque.css,  atelier-lakeside.dark,  solarized_dark que j'aime beaucoup -->
    <link href="{{ asset('bundles/ckeditor_mybuild/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css') }}" rel="stylesheet">

    <script src="{{ asset('bundles/ckeditor_mybuild/plugins/codesnippet/lib/highlight/highlight.pack.js') }}"></script>
    {% endblock %}


    {% block body %}

    #votre page avec vos vues
    #...

    {% endblock %}

    {% block javascripts %}
    <script>
    hljs.initHighlightingOnLoad();
    </script>
    {%  endblock %}

Choisissez votre thème

Sur cette page il y a plusieurs exemple de thèmes.
Choisissez celle qui vous convient et adaptez vos insertions côté éditeur, et côté rendu. wink

Et c'est fini !
Je vous cache pas que cet article m'a permit de tester un peu la fonctionnalité : D.
J'espère que ça vous sera utile. Have fun !

 

Sources