Rédiger des articles contenant des extraits de code avec Symfony 4 et CKEditor 4

Dans cet article, je vais détailler comment intégrer des extraits de code dans vos articles de blog réalisés sous Symfony avec CKEditor et principalement en utilisant le plugin CodeSnippet, qui se repose sur la célèbre librairie highlight.js, qui met à disposition de nombreux thèmes pour que vous puissiez conserver une couleur syntaxique cohérente par rapport à votre langage de programmation habituel.

Pour rédiger ce tutoriel, je suppose que vous avez déjà installé et configuré les librairies ci-dessous en utilisant les documentations officielles. Dans l'exemple de ce tutoriel les versions des librairies utilisées sont les suivantes :

Selon la version que vous utilisez, des adaptations de code seront à prévoir.

Dans l'exemple qui va suivre nous allons supposer disposer d'une entité nommée Post qui représentera comme son nom l'indique notre article et dans laquelle nous aurons une propriété body qui pourra ou non contenir des extraits de code, un CRUD (Create, Read, Update, Delete) sur l'entité et un formulaire PostType. L'objectif consistera alors à faire en sorte que mon WYSIWYG CKEditor intège le plugin Code Snippet me permettant de saisir du code rapidement dans mon article, comme illustré dans l'image ci-dessous :

preview ckeeditor

Comme indiqué en introduction, ce plugin a une dépendance avec la librairie Highlight.js et de ce fait vous pourrez plus tard configurer CKEditor de sorte à utiliser le thème désiré.

Configuration du pluggin CodeSnippet dans CKEditor

Il y a 2 choix possibles :

  • Soit, vous avez l'intention d'utiliser ce plugin uniquement sur un seul formulaire bien précis et dans ce cas vous ajoutez directement la configuration dans le formType concerné (dans notre cas PostType).

  • Soit vous avez l'intention de généraliser cette configuration à l'ensemble des CKEditorType utilisés sur le site, et dans ce cas  la configuration sera faite dans le fichier config/packages/fos_cke_editor.yaml

Nous allons ici aboder les 2 méthodes, en commençant tout d'abord par la première.

Configuration du formulaire PostType

Actuellement, avec la configuration la plus minimaliste qu'il soit, le champ body de mon formulaire est configuré ainsi dans mon fichier src/Form/PostType.php :

<?php
namespace App\Form;

//... Declaration de mes autres uses

class PostType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        //... Declaration de mes champs
        $builder
            ->add('body', CKEditorType::class, [
              'label' => 'Corps',             
            ]);
        //... Declaration de mes autres champs
    }

    //... Declaration de mes autres methodes
}

Nous allons ajouter la configuration nécessaire sur la propriété body de notre formulaire (qui est de type CKEditorType) afin d'utiliser notre pluggin CodeSnippet :

$builder
    ->add('body', CKEditorType::class, [
      'label' => 'Corps',
      'config' => [
        'extraPlugins' => 'codesnippet',
        'codeSnippet_theme' => 'monokai',
      ],
      'plugins' => [
        'codesnippet' => [
          'path' => 'build/ckeditor/plugins/codesnippet/',
          'filename' => 'plugin.js'
        ],
      ],
    ]);

Dans "config", on indique les plugins qu'on désire intégrer à notre WYSIWYG CKEditor dans extraPlugins (il peut y en avoir plusieurs mais nous nous limiterons ici à l'utilisation de codesnippet) et nous spécifions le nom du thème Highlight.js choisit dans codeSnippet_theme. Dans "plugins", nous indiquons le chemin d'accès et le fichier JS nécessaire au fonctionnement du plugin.

Concernant le thème, il suffit juste de relever le nom du thème qui vous convient ici dans l'onglet Styles et de tout reporter en minuscule (en remplacant les espaces par des tirets).

A ce stade, sans aucune configuration supplémentaire, en actualisation votre page de votre formulaire, vous devrez voir dans la toolbar l'icone permettant de rajouter du code et déclencher la popup au clic :

icone code snippet in toolbar

Vous n'avez plus qu'à sélectionner le langage de programmation, rédiger du code et valider. Le style du thème choisit est instantanément appliqué à votre portion de code dans le wysiwyg :

demo

Configuration par défaut du FOSCKEditor

La configuration est similaire à ce que nous avons vu précédemment, je ne vais pas plus détailler cette rubrique, car si vous avez tout compris jusqu'à maintenant, vous devrez facilement vous retrouver avec ce qui suit. La seule chose qui change est que je déclare quelle est la configuration à utiliser par défaut (que j'ai nommé ici code_snippet_config) :

fos_ck_editor:
    base_path: "build/ckeditor"
    js_path:   "build/ckeditor/ckeditor.js"
    default_config: code_snippet_config
    configs:
        code_snippet_config:
            extraPlugins: "codesnippet"
            codeSnippet_theme: "monokai",

    plugins:
        codesnippet:
            path:     "build/ckeditor/plugins/codesnippet/"
            filename: "plugin.js"

Chargements des styles en dehors du formulaire 

Jusqu'à maintenant nous travaillons sur le formulaire de création et/ou d'édition d'un Post, la configuration concernant le thème choisit était chargée directement par l'élément CKEditorType de notre formulaire.

De ce fait, les styles et scripts étaient chargés automatiquement via la configuration mis en place dans FOSCKEditor et par le biais du formulaire, cependant si nous souhaitons faire afficher le contenu body d'un post en dehors d'un formulaire, le thème de la dépendance Highlight.js ne serait pas chargé. Il faut alors déclarer les styles et les scripts à appeler manuellement et c'est ce que nous allons faire.

Dans notre template affichant le contenu de nitre entité Post, nous allons ajouter les scripts nécessaires dans les blocs twigs stylesheets et javascripts, et initialiser notre variable hljs comme ceci :

{% extends 'base.html.twig' %}

{% block title %}Post{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('build/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai.css') }}"/>
{% endblock %}

{% block body %}
    <table class="table">
        <tbody>
        <tr>
            <td>{{ post.body|raw }}</td>
        </tr>
        </tbody>
    </table>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('build/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js') }}"></script>
<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>
{{ parent() }}
{% endblock %}

Désormais si vous actualisez votre page vous devriez vous rendre compte que les styles et scripts qui sont chargés.

Dans cet article, je suis restée sur une configuration minimaliste, afin d'éviter d'introduire toute source d'erreurs supplémentaires mais vous pouvez combiner à celle-ci d'autres configurations et personnalisatiosn et pour cela je vous invite à jeter un oeil à la documentation de CKEditor qui en soit très bien faite et très facile à manipuler.

Commentaires

Aucun commentaire n'a été publié encore, soyez le premier ?

Rédiger un commentaire

Votre e-mail ne sera pas publié, seul votre nom ou pseudonyme sera affiché. Les champs obligatoires sont marqués par une astérisque (*).

En réponse au message de publié le

Pour connaitre et exercer vos droits , notamment de retrait de votre consentement à l'utilisation de données collectés par ce formulaire, veuillez consulter la rubrique traitant de la politique de confidentialité sur la page des Mentions légales.