|
|
@@ -1,10 +1,10 @@
|
|
|
---
|
|
|
-menu-title: Angular 2+ component
|
|
|
+menu-title: Angular component
|
|
|
category: builds-integration-frameworks
|
|
|
order: 20
|
|
|
---
|
|
|
|
|
|
-# Rich text editor component for Angular 2+
|
|
|
+# Rich text editor component for Angular
|
|
|
|
|
|
[](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular)
|
|
|
|
|
|
@@ -18,7 +18,7 @@ Currently, the CKEditor 5 component for Angular supports integrating CKEditor 5
|
|
|
|
|
|
## Quick start
|
|
|
|
|
|
-In your existing Angular project, install the [CKEditor 5 WYSIWYG editor component for Angular 2+](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular):
|
|
|
+In your existing Angular project, install the [CKEditor 5 WYSIWYG editor component for Angular](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular):
|
|
|
|
|
|
```bash
|
|
|
npm install --save @ckeditor/ckeditor5-angular
|
|
|
@@ -70,7 +70,7 @@ Rebuild your application and CKEditor 5 should greet you with "Hello, world!".
|
|
|
|
|
|
### Note: Using the Document editor build
|
|
|
|
|
|
-If you want to use the {@link framework/guides/document-editor Document editor build}, you need to {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create add the toolbar to the DOM manually}.
|
|
|
+If you want to use the {@link framework/guides/document-editor document editor build}, you need to {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create add the toolbar to the DOM manually}.
|
|
|
|
|
|
```ts
|
|
|
import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
|
|
|
@@ -121,7 +121,7 @@ The component implements the [`ControlValueAccessor`](https://angular.io/api/for
|
|
|
|
|
|
## Supported `@Input` properties
|
|
|
|
|
|
-The following `@Input` properties are supported by the CKEditor 5 component for Angular 2+:
|
|
|
+The following `@Input` properties are supported by the CKEditor 5 rich text editor component for Angular:
|
|
|
|
|
|
### `editor` (required)
|
|
|
|
|
|
@@ -165,7 +165,7 @@ export class MyComponent {
|
|
|
|
|
|
### `tagName`
|
|
|
|
|
|
-Specifies the tag name of the HTML element on which the editor will be created.
|
|
|
+The tag name of the HTML element on which the rich text editor will be created.
|
|
|
|
|
|
The default tag is `<div>`.
|
|
|
|
|
|
@@ -200,16 +200,17 @@ export class MyComponent {
|
|
|
|
|
|
## Supported `@Output` properties
|
|
|
|
|
|
-The following `@Output` properties are supported by the CKEditor 5 component for Angular 2+:
|
|
|
+The following `@Output` properties are supported by the CKEditor 5 rich text editor component for Angular:
|
|
|
|
|
|
### `ready`
|
|
|
|
|
|
-Fired when the editor is ready. It corresponds with the [`editor#ready`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready) event. Fired with the editor instance.
|
|
|
+Fired when the editor is ready. It corresponds with the [`editor#ready`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready) event.
|
|
|
+It is fired with the editor instance.
|
|
|
|
|
|
### `change`
|
|
|
|
|
|
Fired when the content of the editor has changed. It corresponds with the {@link module:engine/model/document~Document#event:change:data `editor.model.document#change:data`} event.
|
|
|
-Fired with an object containing the editor and the CKEditor 5 `change:data` event object.
|
|
|
+It is fired with an object containing the editor and the CKEditor 5 `change:data` event object.
|
|
|
|
|
|
```html
|
|
|
<ckeditor [editor]="Editor" (change)="onChange($event)"></ckeditor>
|
|
|
@@ -237,20 +238,20 @@ export class MyComponent {
|
|
|
### `blur`
|
|
|
|
|
|
Fired when the editing view of the editor is blurred. It corresponds with the {@link module:engine/view/document~Document#event:blur `editor.editing.view.document#blur`} event.
|
|
|
-Fired with an object containing the editor and the CKEditor 5 `blur` event data.
|
|
|
+It is fired with an object containing the editor and the CKEditor 5 `blur` event data.
|
|
|
|
|
|
### `focus`
|
|
|
|
|
|
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.
|
|
|
+It is 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.
|
|
|
+The CKEditor 5 rich text editor component for Angular can be styled using the component stylesheet or using a global stylesheet. 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.
|
|
|
+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 */
|
|
|
@@ -260,7 +261,7 @@ First, create a (S)CSS file in the parent component's directory and style the gi
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-Then in the parent component add the relative path to the above stylesheet.
|
|
|
+Then in the parent component add the relative path to the above stylesheet:
|
|
|
|
|
|
```ts
|
|
|
/* src/app/app.component.ts */
|
|
|
@@ -283,7 +284,7 @@ To style the component using a global stylesheet, first, create it:
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-Then, add it in the `angular.json` configuration file.
|
|
|
+Then, add it in the `angular.json` configuration file:
|
|
|
|
|
|
```json
|
|
|
"architect": {
|
|
|
@@ -299,7 +300,7 @@ Then, add it in the `angular.json` configuration file.
|
|
|
|
|
|
### Setting the placeholder
|
|
|
|
|
|
-To display {@link features/editor-placeholder the placeholder} in the main editable element simply set the `placeholder` field in the CKEditor 5 component configuration:
|
|
|
+To display {@link features/editor-placeholder the placeholder} in the main editable element, set the `placeholder` field in the CKEditor 5 rich text editor component configuration:
|
|
|
|
|
|
```ts
|
|
|
@Component( {
|
|
|
@@ -314,7 +315,7 @@ export class MyComponent {
|
|
|
|
|
|
## Localization
|
|
|
|
|
|
-The CKEditor 5 component can be localized in two steps.
|
|
|
+The CKEditor 5 rich text editor component can be localized in two steps.
|
|
|
|
|
|
### 1. Loading translation files
|
|
|
|
|
|
@@ -360,4 +361,4 @@ For advanced usage see the {@link features/ui-language Setting UI language} guid
|
|
|
|
|
|
## Contributing and reporting issues
|
|
|
|
|
|
-The source code of the rich text editor component for Angular 2+ is available on GitHub in https://github.com/ckeditor/ckeditor5-angular.
|
|
|
+The source code of the CKEditor 5 rich text editor component for Angular is available on GitHub in https://github.com/ckeditor/ckeditor5-angular.
|