我正在尝试为 CKEditor 5 创建 webpack 配置。我正在尝试创建自定义构建。 这是我的 webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const webpack = require('webpack');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/
}
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/
const targetCSS = /\.css$/
// exclude CKE regex from mix's default rules
// if there's a better way to loop/change this, open to suggestions
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
}
}
});
mix.webpackConfig({
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
} )
}
}
]
}
]
},
}
);
但毕竟我只得到
CKEditorError:svg 为空 了解更多:https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-svg为空
XML解析错误:不正确 第 1 行,字符 1:
我正在尝试为我的 vue js|Laravel 应用程序添加自定义 CkEditor 5 构建
我的案例的解决方案是添加到 webpack.mix.js 和 npm 模块 svg-inline-loader
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/
};
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.p?css$/;
// Exclude CK Editor regex from mix's default rules
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
} else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
} else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
/**
* Webpack Config for CK Editor
*/
mix.webpackConfig({
module: {
rules: [
{
test: CKERegex.svg,
use: ['raw-loader']
},
{
test: CKERegex.css,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: CKEStyles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
})
}
}
]
}
]
}
});
在 mix.js 之前(