如何解决 CKEditor Webpack 配置中的「SVG 为空」错误？

2024-03-22 05:07:36

解决 CKEditor Webpack 配置中的「SVG 为空」错误

作为一名经验丰富的程序员和技术作家，我经常遇到各种技术挑战，其中之一就是 CKEditor 中的「SVG 为空」错误。今天，我将分享我解决此问题的步骤，以帮助其他遇到相同问题的开发人员。

错误根源

此错误通常是由 Webpack 配置不正确引起的，尤其是在排除 CKEditor 资源时。Webpack 是一个模块捆绑器，用于打包和优化 JavaScript 代码。如果 Webpack 未正确配置，它可能会从捆绑包中排除必要的 CKEditor 依赖项，导致 SVG 图标无法加载。

解决方案步骤

要解决此问题，请按照以下步骤进行操作：

1. 排除 CKEditor SVG 从 Mix 默认规则

Mix.listen('configReady', webpackConfig => {
    const rules = webpackConfig.module.rules
    const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/
    const targetCSS = /\.css$/

    // 排除 CKE regex 从 mix 的默认规则
    for (const rule of rules) {
        if (rule.test.toString() === targetSVG.toString()) {
            rule.exclude = CKERegex.svg
        } else if (rule.test.toString() === targetCSS.toString()) {
            rule.exclude = CKERegex.css
        }
    }
});

2. 添加自定义 CKEditor Webpack 规则

module: {
    rules: [
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
            use: [ 'raw-loader' ]
        },
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.scss$/,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        injectType: 'singletonStyleTag',
                        attributes: {
                            'data-cke': true
                        }
                    }
                },
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: styles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )
                    }
                }
            ]
        }
    ]
},