Sfoglia il codice sorgente

Merge pull request #1327 from ckeditor/t/ckeditor5-angular/36

Docs: Added section about styling CKEditor 5 component for Angular. Closes ckeditor/ckeditor5-angular#36.
Piotrek Koszuliński 7 anni fa
parent
commit
dd91d00d9d
1 ha cambiato i file con 57 aggiunte e 4 eliminazioni
  1. 57 4
      docs/builds/guides/frameworks/angular.md

+ 57 - 4
docs/builds/guides/frameworks/angular.md

@@ -21,7 +21,7 @@ Currently, the CKEditor 5 component for Angular supports integrating CKEditor 5
 In your existing Angular project, install the [CKEditor 5 WYSIWYG editor component for Angular 2+](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular):
 
 ```bash
-npm install --save-dev @ckeditor/ckeditor5-angular
+npm install --save @ckeditor/ckeditor5-angular
 ```
 
 Install one of the {@link builds/guides/overview#available-builds official editor builds} or {@link builds/guides/development/custom-builds create a custom one} (e.g. if you want to install more plugins or customize something that cannot be controlled with the {@link builds/guides/integration/configuration editor configuration}).
@@ -29,7 +29,7 @@ Install one of the {@link builds/guides/overview#available-builds official edito
 Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic):
 
 ```bash
-npm install --save-dev @ckeditor/ckeditor5-build-classic
+npm install --save @ckeditor/ckeditor5-build-classic
 ```
 
 Now, add `CKEditorModule` to your application module imports:
@@ -246,11 +246,64 @@ Fired with an object containing the editor and the CKEditor 5 `blur` event data.
 Fired when the editing view of the editor is focused. It corresponds with the {@link module:engine/view/document~Document#event:focus `editor.editing.view.document#focus`} event.
 Fired with an object containing the editor and the CKEditor 5 `focus` event data.
 
+## Styling
+
+The CKEditor 5 component for Angular can be styled using the component stylesheet or using a global stylesheet. Let's see how to set the CKEditor 5 component's height using these two approaches.
+
+### Setting the height via the component stylesheet
+
+First, create a (S)CSS file in the parent component's directory and style the given editor's part preceded by the `:host` and `::ng-deep` pseudo selectors.
+
+```css
+/* src/app/app.component.css */
+
+:host ::ng-deep .ck-editor__editable {
+	min-height: 500px;
+}
+```
+
+Then in the parent component add the relative path to the above stylesheet.
+
+```ts
+/* src/app/app.component.ts */
+
+@Component( {
+	// ...
+	styleUrls: [ './app.component.css' ]
+} )
+```
+
+### Setting the height via a global stylesheet
+
+To style the component using a global stylesheet, first, create it:
+
+```css
+/* src/styles.css */
+
+.ck-editor__editable {
+	min-height: 500px;
+}
+```
+
+Then, add it in the `angular.json` configuration file.
+
+```json
+"architect": {
+	"build": {
+		"options": {
+			"styles": [
+				{ "input": "src/styles.css" }
+			]
+		}
+	}
+}
+```
+
 ## Localization
 
 CKEditor 5 can be localized in two steps.
 
-### 1. Load translation files
+### 1. Loading translation files
 
 First, you need to add translation files to the bundle. This step can be achieved in two ways:
 
@@ -274,7 +327,7 @@ First, you need to add translation files to the bundle. This step can be achieve
 	}
 	```
 
-### 2. Configure the language
+### 2. Configuring the language
 
 Then, you need to configure the editor to use the given language: