Configuration:

Symfony: 5.3

Webpack Encore: 1.13

CKEditor: 5.31

ckeditor5

Installation de CKEditor.

Seul la version classique est disponible via npm.

npm install --save @ckeditor/ckeditor5-build-classic

Configuration du fichier webpack.config.php

Ajouter en fin de fichier:

.addPlugin( new CKEditorWebpackPlugin( {
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: 'fr'
} ) )

// Use raw-loader for CKEditor 5 SVG files.
.addRule( {
    test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
    loader: 'raw-loader'
} )

// Configure other image loaders to exclude CKEditor 5 SVG files.
.configureLoaderRule( 'images', loader => {
    loader.exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
} )

// Configure PostCSS loader.
.addLoader({
    test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
    loader: 'postcss-loader',
    options: styles.getPostCssConfig( {
        themeImporter: {
            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
        }
    } )
} )

Ajouter le composant coté front.

Remplacer TextTypeArea::class par un champ caché HiddenType::class

class FormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('message',HiddenType::class)
        ;
    }

Remplacer le champ textarea dans le fichier Twig par une div identifier par un ID.

{{form_start(form)}}

    <p>message</p>
    <div id="editor"></div>

{{form_end(form)}}

Importer CKEditor

Dans le fichier asset/app.js, importer le module.

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
Puis Initialiser la div
ClassicEditor.create( document.querySelector('#editor'));

Publications similaires