|
|
@@ -199,6 +199,7 @@ npm install --save \
|
|
|
Edit the `vue.config.js` file and use the following configuration. If the file is not present, create it in the root of the application (i.e. next to `package.json`):
|
|
|
|
|
|
```js
|
|
|
+const path = require( 'path' );
|
|
|
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
|
|
|
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
|
|
|
|
|
|
@@ -220,24 +221,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 => {
|
|
|
- // 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' );
|
|
|
|
|
|
// Then you can either:
|
|
|
@@ -247,7 +235,7 @@ module.exports = {
|
|
|
// svgRule.uses.clear();
|
|
|
//
|
|
|
// * or exclude ckeditor directory from node_modules:
|
|
|
- svgRule.exclude.add( __dirname + '/node_modules/@ckeditor' );
|
|
|
+ svgRule.exclude.add( path.join( __dirname, 'node_modules', '@ckeditor' ) );
|
|
|
|
|
|
// Add an entry for *.svg files belonging to CKEditor. You can either:
|
|
|
//
|
|
|
@@ -261,6 +249,22 @@ module.exports = {
|
|
|
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
|
|
|
.use( '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 +283,8 @@ npm install --save \
|
|
|
@ckeditor/ckeditor5-essentials \
|
|
|
@ckeditor/ckeditor5-basic-styles \
|
|
|
@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.
|