Explorar o código

Merge branch 'master' into t/1378

Aleksander Nowodzinski %!s(int64=6) %!d(string=hai) anos
pai
achega
a8fde3e71f
Modificáronse 2 ficheiros con 42 adicións e 19 borrados
  1. 18 0
      docs/builds/guides/frameworks/css.md
  2. 24 19
      docs/builds/guides/frameworks/vuejs.md

+ 18 - 0
docs/builds/guides/frameworks/css.md

@@ -82,6 +82,7 @@ If you want to use CKEditor 5 with [Materialize.css](https://materializecss.com/
 
 * Configure the base `z-index` of the floating editor UI so it is displayed over the Materialize modals.
 * Bring back the default `.ck-input` class appearance (because Materialize overrides it with a higher specificity).
+* Bring back the default `<ul>` and `<li>` appearance (because Materialize overrides it).
 * Configure modals so they stop "stealing" the focus from the rich-text editor input fields.
 
 Use the following CSS to address the issues with the `z-index` and selector specificity:
@@ -123,6 +124,23 @@ Use the following CSS to address the issues with the `z-index` and selector spec
 }
 ```
 
+```css
+/*
+ * Bring back the default <ul> and <li> appearance.
+ *
+ * See: https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/_global.scss#L28-L37
+ */
+.ck.ck-content ul,
+.ck.ck-content ul li {
+  list-style-type: inherit;
+}
+
+.ck.ck-content ul {
+  /* Default user agent stylesheet, you can change it to your needs. */
+  padding-left: 40px;
+}
+```
+
 To change the behavior of the modals and prevent them from "stealing" the focus, use the [`dismissible: false`](https://materializecss.com/modals.html#options) option.
 
 ```js

+ 24 - 19
docs/builds/guides/frameworks/vuejs.md

@@ -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.