|
@@ -220,24 +220,11 @@ module.exports = {
|
|
|
]
|
|
]
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
- css: {
|
|
|
|
|
- loaderOptions: {
|
|
|
|
|
- // Various modules in the CKEditor source code import .css files.
|
|
|
|
|
- // These files must be transpiled using PostCSS in order to load properly.
|
|
|
|
|
- postcss: styles.getPostCssConfig( {
|
|
|
|
|
- themeImporter: {
|
|
|
|
|
- themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
|
|
|
|
|
- },
|
|
|
|
|
- minify: true
|
|
|
|
|
- } )
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
|
|
+ // Vue CLI would normally use its own loader to load .svg and .css files, however:
|
|
|
|
|
+ // 1. The icons used by CKEditor must be loaded using raw-loader,
|
|
|
|
|
+ // 2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
|
|
|
chainWebpack: config => {
|
|
chainWebpack: config => {
|
|
|
- // Vue CLI would normally use its own loader to load .svg files. The icons used by
|
|
|
|
|
- // CKEditor should be loaded using raw-loader instead.
|
|
|
|
|
-
|
|
|
|
|
- // Get the default rule for *.svg files.
|
|
|
|
|
|
|
+ // (1.) To handle editor icons, get the default rule for *.svg files first:
|
|
|
const svgRule = config.module.rule( 'svg' );
|
|
const svgRule = config.module.rule( 'svg' );
|
|
|
|
|
|
|
|
// Then you can either:
|
|
// Then you can either:
|
|
@@ -261,6 +248,22 @@ module.exports = {
|
|
|
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
|
|
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
|
|
|
.use( 'raw-loader' )
|
|
.use( 'raw-loader' )
|
|
|
.loader( 'raw-loader' );
|
|
.loader( 'raw-loader' );
|
|
|
|
|
+
|
|
|
|
|
+ // (2.) Transpile the .css files imported by the editor using PostCSS.
|
|
|
|
|
+ // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
|
|
|
|
|
+ config.module
|
|
|
|
|
+ .rule( 'cke-css' )
|
|
|
|
|
+ .test( /ckeditor5-[^/\\]+[/\\].+\.css$/ )
|
|
|
|
|
+ .use( 'postcss-loader' )
|
|
|
|
|
+ .loader( 'postcss-loader' )
|
|
|
|
|
+ .tap( () => {
|
|
|
|
|
+ return styles.getPostCssConfig( {
|
|
|
|
|
+ themeImporter: {
|
|
|
|
|
+ themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
|
|
|
|
|
+ },
|
|
|
|
|
+ minify: true
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
```
|
|
```
|
|
@@ -279,7 +282,8 @@ npm install --save \
|
|
|
@ckeditor/ckeditor5-essentials \
|
|
@ckeditor/ckeditor5-essentials \
|
|
|
@ckeditor/ckeditor5-basic-styles \
|
|
@ckeditor/ckeditor5-basic-styles \
|
|
|
@ckeditor/ckeditor5-link \
|
|
@ckeditor/ckeditor5-link \
|
|
|
- @ckeditor/ckeditor5-paragraph
|
|
|
|
|
|
|
+ @ckeditor/ckeditor5-paragraph \
|
|
|
|
|
+ @ckeditor/ckeditor5-theme-lark
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
You can use more packages, depending on which features are needed in your application.
|
|
You can use more packages, depending on which features are needed in your application.
|