Laravel 8 / Laravel Mix 6 上的 CKEditor5 v.32

Question

有人有工作吗webpack.mix.js已经在 Laravel 8（Laravel Mix 6 和 Webpack 5）上为 CKEditor5 32 配置了吗？在过去的 8 个小时里，我一直在用头撞墙，但仍然无法让它工作。

这是我收到的控制台错误。

之前，当我使用 Laravel Mix 5 和 Webpack 4 时，this config solution 似乎可以正常工作。

但是现在我得到的只是 npm 编译期间的一堆相同的错误。

Answer 1

配置的片段对我有用

const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const CKEditorStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
//Includes SVGs and CSS files from "node_modules/ckeditor5-*" and any other custom directories
const CKEditorRegex = {
    svg: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/, //If you have any custom plugins in your project with SVG icons, include their path in this regex as well.
    css: /ckeditor5-[^/\]+[/\].+.css$/,
};

//Exclude CKEditor regex from mix's default rules
Mix.listen('configReady', config => {
    const rules = config.module.rules;
    const targetSVG = (/(.(png|jpe?g|gif|webp|avif)$|^((?!font).)*.svg$)/).toString();
    const targetFont = (/(.(woff2?|ttf|eot|otf)$|font.*.svg$)/).toString();
    const targetCSS = (/.p?css$/).toString();

    rules.forEach(rule => {
        let test = rule.test.toString();
        if ([targetSVG, targetFont].includes(rule.test.toString())) {
            rule.exclude = CKEditorRegex.svg;
        } else if (test === targetCSS) {
            rule.exclude = CKEditorRegex.css;
        }
    });
});

mix.webpackConfig({
    plugins: [
        new CKEditorWebpackPlugin({
            language: 'en',
            addMainLanguageTranslationsToAllAssets: true
        }),
    ],
    module: {
        rules: [
            {
                test: CKEditorRegex.svg,
                use: ['raw-loader']
            },
            {
                test: CKEditorRegex.css,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: CKEditorStyles.getPostCssConfig({
                                themeImporter: {
                                    themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                                },
                                minify: true
                            })
                        }
                    }
                ]
            }
        ]
    }
});

眼镜：

• 节点 v.16.11.1
• npm v.8.0.0
• Laravel v.8.77.1

包.json

"laravel-mix": "6.0.40",
"postcss-loader": "^6.2.1",
"raw-loader": "^4.0.1",
"sass": "^1.49.4",
"sass-loader": "^12.4.0",
"style-loader": "^2.0.0"

Answer 2

Mix.listen() 已弃用，将在未来的版本中消失。应替换为mix.override()。

谢谢@bakis。 经过数小时的搜索，这是唯一可用的版本。从 mix 的默认规则中排除 CKEditor regex 是被忽略的关键。

    /**  ckeditor 5 webpack config ****/
    const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
    const CKEditorStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
    //Includes SVGs and CSS files from "node_modules/ckeditor5-*" and any other custom directories
    const CKEditorRegex = {
      svg: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/, //If you have any custom plugins in your project with SVG icons, include their path in this regex as well.
      css: /ckeditor5-[^/\]+[/\].+.css$/,
    };

    mix.webpackConfig({
      plugins: [
        new CKEditorWebpackPlugin({
          language: 'en',
          addMainLanguageTranslationsToAllAssets: true
        }),
      ],
      module: {
        rules: [
          {
            test: CKEditorRegex.svg,
            use: ['raw-loader']
          },
          {
            test: CKEditorRegex.css,
            use: [
              {
                loader: 'style-loader',
                options: {
                  injectType: 'singletonStyleTag',
                  attributes: {
                    'data-cke': true
                  }
                }
              },
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: CKEditorStyles.getPostCssConfig({
                    themeImporter: {
                      themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                    },
                    minify: true
                  })
                }
              }
            ]
          }
        ]
      }
    });

    //Exclude CKEditor regex from mix's default rules
    mix.override(config => {
      const rules = config.module.rules;
      const targetSVG = (/(.(png|jpe?g|gif|webp|avif)$|^((?!font).)*.svg$)/).toString();
      const targetFont = (/(.(woff2?|ttf|eot|otf)$|font.*.svg$)/).toString();
      const targetCSS = (/.p?css$/).toString();

      rules.forEach(rule => {
        let test = rule.test.toString();
        if ([targetSVG, targetFont].includes(rule.test.toString())) {
          rule.exclude = CKEditorRegex.svg;
        } else if (test === targetCSS) {
          rule.exclude = CKEditorRegex.css;
        }
      });
    });