I'm trying to build from source Ckeditor 5 with Webpack Encore. I followed the instructions here:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#bundler
But i have a problem with the display of the tool. It looks weird like this (first, when i used the built-in from Ckeditor it was working fine):
I think that the problem is relative to CSS but i don't see what is wrong. My Webpack compiles fine and the console is empty. My package.json looks like this:
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/helper-call-delegate": "^7.8.7",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@fortawesome/fontawesome-free": "^5.13.0",
"@symfony/webpack-encore": "^0.29.1",
"babel-loader": "^8.1.0",
"bootstrap": "^4.4.1",
"core-js": "^3.0.0",
"jquery": "^3.5.1",
"node-sass": "^4.13.1",
"popper.js": "^1.16.1",
"regenerator-runtime": "^0.13.2",
"sass-loader": "7.0.1",
"webpack-notifier": "^1.6.0",
"@ckeditor/ckeditor5-dev-utils": "^13.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.2",
"raw-loader": "^3.1.0",
"postcss-loader": "^3.0.0"
"dependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^19.0.0",
"@ckeditor/ckeditor5-autoformat": "^19.0.0",
"@ckeditor/ckeditor5-easy-image": "^19.0.0",
"@ckeditor/ckeditor5-alignment": "^19.0.0",
"@ckeditor/ckeditor5-autosave": "^19.0.0",
"@ckeditor/ckeditor5-basic-styles": "^19.0.0",
"@ckeditor/ckeditor5-block-quote": "^19.0.0",
"@ckeditor/ckeditor5-core": "^19.0.0",
"@ckeditor/ckeditor5-editor-classic": "^19.0.0",
"@ckeditor/ckeditor5-essentials": "^19.0.0",
"@ckeditor/ckeditor5-font": "^19.0.0",
"@ckeditor/ckeditor5-heading": "^19.0.0",
"@ckeditor/ckeditor5-indent": "^19.0.0",
"@ckeditor/ckeditor5-link": "^19.0.0",
"@ckeditor/ckeditor5-list": "^19.0.0",
"@ckeditor/ckeditor5-media-embed": "^19.0.0",
"@ckeditor/ckeditor5-paragraph": "^19.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^19.0.0",
"@ckeditor/ckeditor5-table": "^19.0.0",
"@ckeditor/ckeditor5-theme-lark": "^19.0.0",
"@ckeditor/ckeditor5-typing": "^19.0.0",
"@ckeditor/ckeditor5-image": "^19.0.0",
"bootstrap-datepicker": "^1.9.0",
"dropzone": "^5.7.0",
"leaflet": "^1.6.0",
"leaflet-ajax": "^2.1.0",
"sortablejs": "^1.10.2",
"sweetalert2": "^9.10.12"
}
My webpack.config.js looks like this:
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
var Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addEntry('Form', './assets/js/modules/Form.js')
.addEntry('Edit', './assets/js/modules/Edit.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader()
.copyFiles({
from: './assets/img'})
// 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')
}
} )
} )
I removed CKEditorWebpackPlugin from the webpack file because it was bringing errors in the compilation phase of Webpack, but the problem was already there with it.
My import of CKeditor looks like this:
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [...
I don't see what is wrong... maybe someone can help me? Thank you so much if you any idea to solve this problem.
Have a nice day
