New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CKEditor5 custom build problem #393
Comments
Hi. I've dealt with something similar but i'm a noob in the webpack and modern javascript world so take this with a grain of salt. I've updated my symfony4 project to I think your problem is that the svg icons from ckeditor5 are not being handled correctly becouse rules fight each other for them. My solution disables encore default image loaders and set up new ones excluding ckeditor svg assets. const {styles} = require('@ckeditor/ckeditor5-dev-utils');
// ...
Encore.
// ...
.addPlugin(new CKEditorWebpackPlugin({
// .. CKEditor options like language and stuf...
}))
// Disable default image loaders from encore
..disableImagesLoader()
// Use raw-loader for CKEditor icons only
.addRule({
test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
use: [ {
loader: 'raw-loader'
} ]
})
// Next one is pretty much the default encore rule for handling images but excluding CKEditor
.addRule({
test: /\.(svg|png|jpg|jpeg|gif|ico)/,
exclude: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
use: [{
loader: 'file-loader',
options: {
filename: 'images/[name].[hash:8].[ext]',
publicPath: '/build/'
}
}]
})
.addRule({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
]
}); Hope it helps |
Hi, The Encore.enablePostCssLoader(options => {
Object.assign(options, styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true // Not sure that's needed, the css-loader already minifies CSS
}));
}); |
@Lyrkan I've tested it and you are right, removing the post-css loader rule and using your snippet works well in my setup. Thank you. |
Hi, today I had to build CKEditor5 from source in order to use the Underline plugin. There is actually no documentation that shows how to do it ( (The I think this issue can be closed. EDIT: Instead of using When using Use this instead: Encore.addLoader({
test: /ckeditor5-[^/\\]+[/\\].+\.css$/,
loader: 'postcss-loader',
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
},
}),
}) |
I follow this example: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html
// webpack.config.js
Then an error occurred. How can I solve it?
Thx.
The text was updated successfully, but these errors were encountered: