# Integrating CKEditor 5 with Angular from CDN CKEditor 5 has an official Angular component that you can use to add a rich text editor to your application, whether you use standalone or NGModule components. It works with multiple editor types, including classic, inline, and decoupled (document), and integrates with Angular forms through `ngModel`. This guide will help you install and configure it using the CDN distribution of CKEditor 5. > **Create your own CKEditor 5** > > Check out our interactive Builder to quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. > > * editor type, > * the features you need, > * the preferred framework (React, Angular, Vue or Vanilla JS), > * the preferred distribution method. > > You get ready-to-use code tailored to your needs! > > [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs) ## Quick start This guide assumes you already have an Angular project. To create such a project, you can use Angular CLI. Refer to the [Angular documentation](https://angular.io/cli) to learn more. > **Note** > > To use our Cloud CDN services, [create a free account](https://portal.ckeditor.com/checkout?plan=free). Learn more about [license key activation](../../licensing/license-key-and-activation.md). First, install the [CKEditor 5 WYSIWYG editor component for Angular](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular): ```bash npm install @ckeditor/ckeditor5-angular ``` Angular is a TypeScript-first environment, so you may need to import TypeScript types for CKEditor. Depending on the plugins and features you use, you may also need to install the required open-source and premium packages: ```bash npm install --save-dev ckeditor5 # Open-source plugin types. npm install --save-dev ckeditor5-premium-features # Premium features plugin types. ``` In the below example, the `loadCKEditorCloud` helper is used to load the editor code and plugins from CDN. To use CKEditor 5 with CDN, you need to import the function and call it inside the `ngOnInit` lifecycle hook with the `version` provided in the configuration. To use premium plugins, set the `premium` property to `true` and provide your license key in the configuration. For more information about the `loadCKEditorCloud` helper, see the [Loading CDN resources](../../setup/loading-cdn-resources.md) guide. ```angular-ts // app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CKEditorModule, loadCKEditorCloud, CKEditorCloudResult } from '@ckeditor/ckeditor5-angular'; import type { ClassicEditor, EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'; @Component( { selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof ClassicEditor | null = null; public config: EditorConfig | null = null; public ngOnInit(): void { loadCKEditorCloud( { version: '49.0.0', premium: true } ).then( this._setupEditor.bind( this ) ); } private _setupEditor ( cloud: CKEditorCloudResult<{ version: '49.0.0', premium: true }> ) { const { ClassicEditor, Essentials, Paragraph, Bold, Italic } = cloud.CKEditor; const { FormatPainter } = cloud.CKEditorPremiumFeatures; this.Editor = ClassicEditor; this.config = { licenseKey: '', plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ] }; } } ``` In the example above, the `EditorConfig` type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` package, while the editor itself loads from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor 5 typings file but a synthetic TypeScript module providing type definitions for the editor. The `ckeditor5` or `ckeditor5-premium-features` packages supply the actual types, which depend on the `@ckeditor/ckeditor5-angular` package. Finally, use the `` tag in the template to run the rich text editor. The usage is the same regardless of the plugin configuration. ```angular-html ``` ## Supported `@Input` properties The following `@Input` properties are supported by the CKEditor 5 rich text editor component for Angular: ### `editor` (required) The [`Editor`](../../setup/editor-lifecycle.md) which provides the static [`create()`](../../../api/module_core_editor_editor-Editor.md#static-function-create) method to create an instance of the editor: ```angular-html ``` ### `config` The [configuration](../../../api/module_core_editor_editorconfig-EditorConfig.md) of the editor: ```angular-html ``` ### `data` The initial data of the editor. It can be a static value: ```angular-html ``` or a shared parent component’s property ```angular-ts @Component( { // ... } ) export class MyComponent { public editorData; private _setupEditor( cloud ) { this.editorData = '

Hello, world!

'; } // ... } ``` ```angular-html ``` ### `tagName` > **Warning** > > The `tagName` input is deprecated in favor of `config.root.element` (or `config.roots.main.element`). The new configuration option lets you customize the tag name, classes, inline styles, and HTML attributes of the editable element. See the [Using an inline editor](#using-an-inline-editor) section below for details. The tag name of the HTML element on which the rich text editor will be created. The default tag is `
`. ```angular-html ``` ### `disabled` Controls the editor’s [read–only](../../../api/module_core_editor_editor-Editor.md#member-isReadOnly) state: ```angular-ts @Component( { // ... } ) export class MyComponent { public isDisabled; // ... private _setupEditor( cloud ) { this.isDisabled = false; } toggleDisabled() { this.isDisabled = !this.isDisabled; } } ``` ```angular-html ``` ### `disableTwoWayDataBinding` Allows disabling the two-way data binding mechanism. The default value is `false`. The reason for the introduction of this option is performance issues in large documents. By default, while using the `ngModel` directive, whenever the editor’s data is changed, the component must synchronize the data between the editor instance and the connected property. This results in calling the [`editor.getData()`](../../../api/module_core_editor_editor-Editor.md#function-getData) function, which causes a massive slowdown while typing in large documents. This option allows the integrator to disable the default behavior and only call the [`editor.getData()`](../../../api/module_core_editor_editor-Editor.md#function-getData) method on demand, which prevents the slowdowns. You can read more in the [relevant issue](https://github.com/ckeditor/ckeditor5-angular/issues/141). ## Supported `@Output` properties 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`](../../../api/module_core_editor_editor-Editor.md#event-ready) event.\ It is fired with the editor instance. ### `change` Fired when the content of the editor has changed. It corresponds with the [`editor.model.document#change:data`](../../../api/module_engine_model_document-ModelDocument.md#event-change:data) event.\ It is fired with an object containing the editor and the CKEditor 5 `change:data` event object. ```angular-html ``` ```angular-ts import { ClassicEditor } from 'ckeditor5'; import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component'; @Component( { // ... } ) export class MyComponent { public Editor; private _setupEditor( cloud ) { const { ClassicEditor } = cloud.CKEditor; this.Editor = ClassicEditor; } public onChange( { editor }: ChangeEvent ) { const data = editor.getData(); console.log( data ); } // ... } ``` ### `blur` Fired when the editing view of the editor is blurred. It corresponds with the [`editor.editing.view.document#blur`](../../../api/module_engine_view_document-ViewDocument.md#event-blur) event.\ 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 [`editor.editing.view.document#focus`](../../../api/module_engine_view_document-ViewDocument.md#event-focus) event.\ It is fired with an object containing the editor and the CKEditor 5 `focus` event data. ### `error` Fired when an error is reported for the editor, either during the initialization or at runtime. > **Note** > > Prior to ckeditor5-angular `v7.0.1`, this event was not fired for errors during the editor initialization. A reported error does not stop the editor. Its state may no longer be consistent, so do not leave the error unhandled. Nothing is restarted and no data is restored for you, so what happens next is your application’s decision. The [error handling](../../setup/error-handling.md) guide covers the options: telling the user and switching the editor to read-only, recreating it, and recovering its content. If you are moving off the Watchdog, the [migrating from the Watchdog](../../../updating/guides/migration-from-watchdog.md) guide shows how to recreate the editor and when to do it. In Angular that check differs from the other integrations because the `error` output carries no `phase`. ## Integration with `ngModel` The component implements the [`ControlValueAccessor`](https://angular.io/api/forms/ControlValueAccessor) interface and works with the `ngModel`. Here is how to use it: Create some model in your component to share with the editor: ```angular-ts @Component( { // ... } ) export class MyComponent { public model; private _setupEditor( cloud ) { this.model = { editorData: '

Hello, world!

' }; } // ... } ``` Use the model in the template to enable a two–way data binding: ```angular-html ``` ### Styling The CKEditor 5 rich text editor component for Angular can be styled using the component style sheet or using a global style sheet. See how to set the CKEditor 5 component’s height using these two approaches. ### Setting the height via the component style sheet 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_inline { min-height: 500px; } ``` Then, in the parent component, add the relative path to the above style sheet: ```angular-ts /* src/app/app.component.ts */ @Component( { // ... styleUrls: [ './app.component.css' ] } ) ``` #### Setting the height via a global style sheet To style the component using a global style sheet, first, create it: ```css /* src/styles.css */ .ck-editor__editable_inline { min-height: 500px; } ``` Then, add it to the `angular.json` configuration file: ```json "architect": { "build": { "options": { "styles": [ { "input": "src/styles.css" } ] } } } ``` #### Setting the placeholder To display [the placeholder](../../../features/editor-placeholder.md) in the main editable element, set the `root.placeholder` field in the CKEditor 5 rich text editor component configuration: ```angular-ts @Component( { // ... } ) export class MyComponent { public config; private _setupEditor( cloud ) { // ... this.config = { root: { placeholder: 'Type the content here!' } } } } ``` ### Accessing the editor instance The CKEditor 5 rich text editor component provides all the functionality needed for most use cases. When access to the full CKEditor 5 API is needed, you can get the editor instance with an additional step. To do this, create a template reference variable `#editor` pointing to the `` component: ```angular-html ``` Then get the `` component using a property decorated by `@ViewChild( 'editor' )` and access the editor instance when needed: ```angular-ts @Component() export class MyComponent { @ViewChild( 'editor' ) editorComponent: CKEditorComponent; public getEditor() { // Warning: This may return "undefined" if the editor is hidden behind the `*ngIf` directive or // if the editor is not fully initialised yet. return this.editorComponent.editorInstance; } } ``` > **Note** > > The editor creation is asynchronous, so the `editorInstance` will not be available until the editor is created. If you want to make changes to an editor that has just been created, a better option would be getting the CKEditor 5 instance on the [`ready`](#ready) event. ## How to? ### Using the Document editor type If you want to use the [document (decoupled) editor](../../../framework/deep-dive/ui/document-editor.md), you need to [add the toolbar to the DOM manually](../../../api/module_editor-decoupled_decouplededitor-DecoupledEditor.md#static-function-create): ```angular-ts // app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CKEditorCloudResult, CKEditorModule, loadCKEditorCloud } from '@ckeditor/ckeditor5-angular'; import { DecoupledEditor, EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'; @Component( { selector: 'app-root', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { title = 'angular'; public Editor: typeof DecoupledEditor | null = null; public config: EditorConfig | null = null; public ngOnInit(): void { loadCKEditorCloud( { version: '49.0.0' } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud: CKEditorCloudResult<{ version: '49.0.0'}>) { const { DecoupledEditor, Essentials, Paragraph, Bold, Italic } = cloud.CKEditor; this.Editor = DecoupledEditor; this.config = { licenseKey: '', plugins: [ Essentials, Paragraph, Bold, Italic ], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ] }; } public onReady( editor: DecoupledEditor ) { const element = editor.ui.getEditableElement()!; const parent = element.parentElement!; parent.insertBefore( editor.ui.view.toolbar.element!, element ); } } ``` And then, link the method in the template: ```angular-html ``` ### Using an inline editor Single-root editors such as [`InlineEditor`](../../../api/module_editor-inline_inlineeditor-InlineEditor.md), [`BalloonEditor`](../../../api/module_editor-balloon_ballooneditor-BalloonEditor.md), and [`DecoupledEditor`](../../../api/module_editor-decoupled_decouplededitor-DecoupledEditor.md) can be configured as inline editors that accept only inline content (text, bold, italic, links) instead of blocks. This is useful for short fields such as titles, captions, or single-line inputs. Set [`root.modelElement`](../../../api/module_core_editor_editorconfig-RootConfig.md#member-modelElement) to `'$inlineRoot'` to restrict the root to inline content. Optionally, provide a custom [`root.element`](../../../api/module_core_editor_editorconfig-RootConfig.md#member-element) to render the editable host as a specific tag (for example, `

` for a title) instead of the default `
`. ```angular-ts // app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CKEditorCloudResult, CKEditorModule, loadCKEditorCloud } from '@ckeditor/ckeditor5-angular'; import { BalloonEditor, EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'; @Component( { selector: 'app-root', templateUrl: './app.component.html', imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof BalloonEditor | null = null; public config: EditorConfig | null = null; public ngOnInit(): void { loadCKEditorCloud( { version: '49.0.0' } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud: CKEditorCloudResult<{ version: '49.0.0' }> ) { const { BalloonEditor, Essentials, Bold, Italic } = cloud.CKEditor; this.Editor = BalloonEditor; this.config = { licenseKey: '', plugins: [ Essentials, Bold, Italic ], toolbar: [ 'bold', 'italic' ], root: { element: 'h1', modelElement: '$inlineRoot', initialData: 'Document title', placeholder: 'Enter title...' } }; } } ``` ```angular-html ``` The `root.element` property accepts: * A tag name string, for example `'h1'` or `'section'`. * A descriptor object with `name`, `classes`, `styles`, and `attributes` fields. Without `modelElement: '$inlineRoot'`, only the host tag changes – the schema still permits blocks inside the root. > **Important** > > The `` component always renders a `
` host for `ClassicEditor`, regardless of `root.element`. Classic editor wraps its toolbar and editable inside its own structure. Use `InlineEditor`, `BalloonEditor`, or `DecoupledEditor` to control the host element. ### Using inside a shadow root Rendering the editor inside a shadow root isolates it from the styles of the host page. Set [`ViewEncapsulation.ShadowDom`](https://angular.dev/api/core/ViewEncapsulation) on the component and Angular attaches the root for you. Use a component that wraps the editor rather than the root component of the application, or everything the application renders ends up inside the root. The loader injects the editor style sheets as `` tags, so point it at that root with the `injectedStylesheetsLocation` option. Without it they would land in `document.head`, which the shadow root cannot see. The whole editor UI, including the body collection that holds balloons and dropdown panels, stays inside the shadow root, so the scoped style sheets cover all of it. This happens because [`config.ui.overlayContainer`](../../../api/module_core_editor_editorconfig-UiConfig.md#member-overlayContainer) is not set, so the editor falls back to the root it is in and logs the `ui-overlay-container-not-configured` warning. For a more robust setup, set your own overlay container and load the same style sheets into it, as described in the [Where the floating user interface mounts](../../setup/shadow-dom.md#where-the-floating-user-interface-mounts) section of the Shadow DOM guide. ```angular-ts // editor.component.ts import { Component, ElementRef, ViewEncapsulation, inject, type AfterViewInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CKEditorCloudResult, CKEditorModule, loadCKEditorCloud } from '@ckeditor/ckeditor5-angular'; import { ClassicEditor, EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'; @Component( { selector: 'app-editor', templateUrl: './editor.component.html', imports: [ CommonModule, CKEditorModule ], standalone: true, encapsulation: ViewEncapsulation.ShadowDom } ) export class EditorComponent implements AfterViewInit { public Editor: typeof ClassicEditor | null = null; public config: EditorConfig | null = null; private readonly _elementRef: ElementRef = inject( ElementRef ); // Loading starts after the view is initialized, so that the shadow root is already in the // document. A `` in a detached tree never starts loading, and the loader would wait for it. public ngAfterViewInit(): void { loadCKEditorCloud( { version: '49.0.0', injectedStylesheetsLocation: { targetNode: this._elementRef.nativeElement.shadowRoot! } } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud: CKEditorCloudResult<{ version: '49.0.0' }> ) { const { ClassicEditor, Essentials, Paragraph, Bold, Italic } = cloud.CKEditor; this.Editor = ClassicEditor; this.config = { licenseKey: '', plugins: [ Essentials, Paragraph, Bold, Italic ], toolbar: [ 'bold', 'italic' ] }; } } ``` ```angular-html ``` An override of a `--ck-*` variable on `:root` has no effect on an editor inside a shadow root, so put it on the shadow host instead. The [Shadow DOM](../../setup/shadow-dom.md) guide explains why, and covers the known limitations. ### Using the editor with collaboration plugins We provide **ready-to-use integration** featuring collaborative editing in an Angular application: * [CKEditor 5 with real-time collaboration features](https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/real-time-collaboration-for-angular) It is not mandatory to build an application on top of the above samples, however, it should help you get started. ### Sharing a context To share one [`Context`](../../../api/module_core_context-Context.md) between editors, create it yourself and pass it in the editor configuration: ```angular-ts this.context = await MyEditor.Context.create( { // The context configuration. } ); this.config = { context: this.context }; ``` The context is yours, so destroy it when you are done with it. Hold the editors back until the context is ready, with `*ngIf="config"` on the `` element. The component reads its configuration only once, when it creates the editor. If it renders before `Context.create()` resolves, the editor gets no context, and setting the configuration later changes nothing. Errors attributed to the context rather than to one of its editors are not emitted by the component; register a callback for those with `MyEditor.Context.onEditorError()`. ### Localization CKEditor 5 supports [multiple UI languages](../../setup/ui-language.md), and so does the official Angular component. To translate the editor, pass the languages you need into the `translations` array inside the configuration of the `loadCKEditorCloud` function. ```angular-ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CKEditorModule, loadCKEditorCloud, CKEditorCloudResult } from '@ckeditor/ckeditor5-angular'; import { ClassicEditor, EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'; @Component( { selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof ClassicEditor | null = null; public config: EditorConfig | null = null; public ngOnInit(): void { loadCKEditorCloud( { version: '49.0.0', translations: [ 'es' ] } ).then( this._setupEditor.bind( this ) ); } private _setupEditor ( cloud: CKEditorCloudResult<{ version: '49.0.0'}> ) { const { ClassicEditor, Paragraph, Essentials, Bold, Italic } = cloud.CKEditor; this.Editor = ClassicEditor; this.config = { licenseKey: '', plugins: [ Essentials, Bold, Italic, Paragraph ], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ] }; } } ``` ## Supported Angular versions > **Note** > > Starting from version 6.0.0 of this package, you can use native type definitions provided by CKEditor 5. Because of the breaking changes in the Angular library output format, the `@ckeditor/ckeditor5-angular` package is released in the following versions to support various Angular ecosystems: | CKEditor 5 Angular component version | Angular version | Details | | ------------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Actively supported versions | | | | `^11` | `19+` | Requires CKEditor 5 in version [47](https://github.com/ckeditor/ckeditor5/releases/tag/v47.0.0) or higher. | | | | | | Past releases (no longer maintained) | | | | `^10` | `16+` | Requires CKEditor 5 in version [46](https://github.com/ckeditor/ckeditor5/releases/tag/v46.0.0) or higher. | | `^9` | `16+` | Migration to TypeScript 5. Declaration files are not backward compatible. Requires CKEditor 5 in version [43](https://github.com/ckeditor/ckeditor5/releases/tag/v43.0.0) or higher. | | `^8` | `13+` | Requires CKEditor 5 in version [42](https://github.com/ckeditor/ckeditor5/releases/tag/v42.0.0) or higher. | | `^7` | `13+` | Changes in peer dependencies ([issue](https://github.com/ckeditor/ckeditor5-angular/issues/376)). Requires CKEditor 5 in version [37](https://github.com/ckeditor/ckeditor5/releases/tag/v37.0.0) or higher. | | `^6` | `13+` | Requires CKEditor 5 in version [37](https://github.com/ckeditor/ckeditor5/releases/tag/v37.0.0) or higher. | | `^5` | `13+` | Requires Angular in version 13+ or higher. | | `^4` | `9.1+` | Requires CKEditor 5 in version [34](https://github.com/ckeditor/ckeditor5/releases/tag/v34.0.0) or higher. | | `^3` | `9.1+` | Requires Node.js in version 14 or higher. | | `^2` | `9.1+` | Migration to TypeScript 4. Declaration files are not backward compatible. | | `^1` | `5.x - 8.x` | Angular versions no longer maintained. | All available Angular versions are [listed on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular), where they can be pulled from. ## Contributing and reporting issues The source code of the CKEditor 5 rich text editor component for Angular is available on GitHub at . ## Next steps * See how to manipulate the editor’s data in the [Getting and setting data](../../setup/getting-and-setting-data.md) guide. * Refer to further guides in the [setup section](../../setup/configuration.md) to see how to customize your editor further. * Check the [features category](../../../features/index.md) to learn more about individual features. --- Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)