ckeditor5, it works ! compiled by webpack encore, and display on textarea

src/Bundle/ChillMainBundle/chill.webpack.config.js

@@ -1,28 +1,61 @@
-// this file loads all assets from the Chill main bundle
+const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
+const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+
+// Compile and loads all assets from the Chill Main Bundle
 module.exports = function(encore, entries)
 {
     // Push into "chill" entrypoint
     entries.push(__dirname + '/Resources/public/main.js');
 
-    encore
     // Add new separate entrypoints
+    encore
         .addEntry('login', __dirname + '/Resources/public/modules/login_page/index.js')
         .addEntry('tabs', __dirname + '/Resources/public/modules/tabs/index.js')
 
         // chill2 new assets
         .addEntry('ckeditor5', __dirname + '/Resources/public/modules/ckeditor5/index.js')
-        .addEntry('bootstrap', __dirname + '/Resources/public/modules/bootstrap/index.js')
         .addEntry('forkawesome', __dirname + '/Resources/public/modules/forkawesome/index.js')
-
-        // Alias are used by Webpack when trying to resolve modules
-        // cfr. https://github.com/symfony/webpack-encore/pull/217/files#diff-e727e4bdf3657fd1d798edcd6b099d6e092f8573cba266154583a746bba0f346
-        .addAliases({
-
-            // sass resolve
-            ChillMainSass: __dirname + '/Resources/public/sass',
-
-            // typescript resolve
-            ShowHide: __dirname + '/Resources/public/modules/show_hide'
-        })
+        //.addEntry('bootstrap', __dirname + '/Resources/public/modules/bootstrap/index.js')
     ;
+
+    // Aliases are used when webpack is trying to resolve modules (sass, typescript)
+    encore.addAliases({
+        ChillMainSass: __dirname + '/Resources/public/sass',
+        ShowHide: __dirname + '/Resources/public/modules/show_hide'
+    });
+
+    //// Build CKEditor5
+    encore
+        .addPlugin( new CKEditorWebpackPlugin( {
+            language: 'fr',
+            addMainLanguageTranslationsToAllAssets: true,
+            verbose: true,
+            strict: true,
+            //additionalLanguages: ['en', 'nl', 'es'],
+        } ) )
+
+        // 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')
+                },
+                minify: true
+            } )
+        } )
+    ;
+
 };