CKeditor 5 et Symfony 6 sans bundle - Partie 1

CKEditor 5 est une bibliothèque de traitement de texte en ligne qui peut être intégrée dans les projets web. Dans cet article, nous allons voir comment intégrer CKEditor 5 sans bundle dans un projet Symfony 6 en utilisant npm et Webpack.

Commençons par l'installation de CKEditor 5 avec npm:

$ npm install @ckeditor/ckeditor5-build-classic

Dans un fichier JavaScript (par exemple, assets/js/ckeditor/ckeditor_init.js), on va importer et initialiser CKEditor 5 :

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor
   .create( document.querySelector( '.ckeditor' ) , {

   })
   .then( editor => {
      console.log( editor );
   } )
   .catch( error => {
      console.error( error );
   } );

Dans ce fichier j'utilise .ckeditor comme class pour le texarea qui sera utilisé par l'éditeur, une liste exhaustive des paramètres de configuration est disponible sur le site de l'édteur.

Incluons ce fichier de notre configuration Webpack afin qu'il soit traité lors de la compilation :

const Encore = require('@symfony/webpack-encore');
// ...

Encore
    // ...
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    // ...
    .addEntry('ckeditor_init', './assets/js/ckeditor/ckeditor_init.js')
    // ...
;

module.exports = Encore.getWebpackConfig();

Lançons la compilation :

$ ./node_modules/.bin/encore production
Running webpack ...

 DONE  Compiled successfully in 15764ms  12:08:14 PM

25 files written to public/build
Entrypoint app [big] 444 KiB = 6 assets
Entrypoint article 50.3 KiB = runtime.61b1725c.js 1.36 KiB 294.2847c630.js 16.2 KiB 850.f206c474.js 24.4 KiB article.fe36a692.js 8.36 KiB
Entrypoint comment 119 KiB = runtime.61b1725c.js 1.36 KiB 294.2847c630.js 16.2 KiB 850.f206c474.js 24.4 KiB 181.bf3e2064.js 42.3 KiB comment.7667e939.js 34.5 KiB
Entrypoint ckeditor [big] 626 KiB = runtime.61b1725c.js 1.36 KiB 234.a432d3f1.js 625 KiB ckeditor.4700896a.js 298 bytes
webpack compiled successfully
Done in 17.35s.

Il ne reste plus qu'à attacher l'asset à la page (twig) souhaitée en tant que script js:

    {{ encore_entry_script_tags('ckeditor_init') }}

Dans mon cas j'utilise EasyAdmin pour gérer les articles, je l'ai attaché comme suit :
 

//...

public function configureAssets(Assets $assets): Assets
    {
        return $assets->addWebpackEncoreEntry(Asset::new('ckeditor_init'));
    }

Voilà ! on a intégré CKEditor 5 dans notre projet Symfony 6 et compilé le fichier JavaScript pour une utilisation en production. Maintenant, vous pouvez profiter des fonctionnalités de traitement de texte en ligne de CKEditor 5 dans votre application web.

Suite: Pour allez plus loin, avec une configuration avancée ainsi qu'un filemanager (elFinder)