highlight de code avec CKeditor 4 et Symfony 6

Tout d'abord, nous partons du principe que vous avez déjà installé et configuré le bundle FOSCKEditorBundle dans votre app Symfony.

Pour ajouter la fonctionnalité permettant l'injection d'un bloc "code" depuis CKeditor 4, nous allons avoir besoin d'un petit addon nommé Code Snippets.

Télécharger le fichier zip contenant l'addon, depuis le site de CKEditor

Placer le contenu du zip dans le dossier <projet>/assets tout en respectant la structure du dossier de l'éditeur:

assets/
|-- ckeditor
|   `-- plugins
|       `-- codesnippet

Pour copier les fichiers du plugin et les placer dans le bon dossier ou CKEditor 4 a été installé par le bundle, on va faire appel à la méthode copyFiles dans notre webpack.config.js :

...
Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // copy ckeditor's plugins/skins files
    .copyFiles({
        from: 'assets/ckeditor/plugins',
        to: 'ckeditor/plugins/[path]/[name].[ext]'
    })
...

Ensuite il faut mettre à jour le fichier de configuration du bundle pour charger l'addon:

twig:
    form_themes:
        - '@FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
    configs:
        main_config:
            filebrowserBrowseRoute: "elfinder"
            filebrowserBrowseRouteParameters: []
            extraPlugins: "codesnippet"
    plugins:
        codesnippet:
            path:     "/build/ckeditor/plugins/codesnippet/" # with trailing slash
            filename: "plugin.js"

Et voilà on voit apparaitre une icône "Code" dans l'éditeur

Côté backend on est bons, maintenant, il nous faut la partie front, dans le fichier base.html.twig attachez le fichiers css/js juste avant la fermeture du tag <head>

<head>
....
<link rel="stylesheet" href="{{ asset('build/ckeditor/plugins/codesnippet/lib/highlight/styles/tomorrow-night-bright.css')  }}" >
<script src="{{ asset('build/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js')}}"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>

Et voilà, vos bouts de codes s'afficheront bien lisibles selon le langage utilisé.

highlight de code avec CKeditor 4 et Symfony 6

0 commentaire(s)