CKEditor 4 WYSIWYG Editor Angular Integration Documentation

The Angular integration allows you to implement CKEditor 4 as an Angular component, using the <ckeditor /> tag.

The following examples showcase the most important features of the CKEditor 4 WYSIWYG editor Angular integration.

Click the tab below to change an example.

Get Sample Source Code

• Classic Editor

  import { Component } from '@angular/core';
  
  @Component( {
  	selector: 'app-classic-editor',
  	template: `
  		<ckeditor
  			[(data)]="editorData">
  		</ckeditor>
  	`
  } )
  export class ClassicEditorComponent {
  	public editorData = `<p>This is a CKEditor 4 WYSIWYG editor instance created with Angular.</p>`;
  }

• Inline Editor

  import { Component } from '@angular/core';
  
  @Component( {
  	selector: 'app-inline-editor',
  	template: `
  		<ckeditor
  			type="inline"
  			[(data)]="editorData">
  		</ckeditor>
  	`
  } )
  export class InlineEditorComponent {
  	public editorData = `<p>This is a CKEditor 4 WYSIWYG editor instance created with Angular.</p>`;
  }

• Editor with custom event handlers and configuration

  import { Component } from '@angular/core';
  
  interface ComponentEvent {
  	name: string;
  	timestamp: string;
  }
  
  @Component( {
  	selector: 'app-events',
  	template: `
  	<h2>WYSIWYG editor with custom event handlers and configuration</h2>
  
  	<p>
  		Editors created with the CKEditior 4 Angular component are highly customizable. It is possible to overwrite every configuration setting using the <code>config</code> directive and passing an object containing the configuration to it.
  	</p>
  
  	<p>
  		Additionally, the CKEditor 4 WYSIWYG editor component for Angular allows you to bind predefined component events using <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_angular.html#supported-output-properties"><code>@Output</code></a> attributes. The following example shows how to bind several common CKEditor 4 events.
  	</p>
  
  	<ckeditor
  		data="<p>This is a CKEditor 4 WYSIWYG editor instance created with Angular.</p>"
  
  		[(config)]="editorConfig"
  
  		(ready)="onReady()"
  		(change)="onChange()"
  		(focus)="onFocus()"
  		(blur)="onBlur()">
  	</ckeditor>
  
  	<section>
  		<h3>Events log</h3>
  		<small>To check additional details about every event, consult the console in the browser developer tools.</small>
  		<div class="events__log">
  			<ul>
  				<li *ngFor="let event of events">
  					{{ event.timestamp }} - {{ event.name }}
  				</li>
  			</ul>
  		</div>
  		<button (click)="clearEventsLog()">Clear events log</button>
  	</section>
  	`
  } )
  export class EventsComponent {
  	public events: ComponentEvent[] = [];
  
  	public editorConfig = {
  		toolbar: [
  			[ 'Source' ],
  			[ 'Styles', 'Format', 'Font', 'FontSize' ],
  			[ 'Bold', 'Italic' ],
  			[ 'Undo', 'Redo' ],
  			[ 'About' ]
  		]
  	}
  
  	clearEventsLog(): void {
  		this.events.length = 0;
  	}
  
  	onReady(): void {
  		this.logEvent( 'ready' );
  	}
  
  	onChange(): void {
  		this.logEvent( 'change' );
  	}
  
  	onFocus(): void {
  		this.logEvent( 'focus' );
  	}
  
  	onBlur(): void {
  		this.logEvent( 'blur' );
  	}
  
  	private logEvent( eventName: string ): void {
  		if ( this.events.length > 19 ) {
  			this.events.pop();
  		}
  
  		const eventData = {
  			name: eventName,
  			timestamp: this.getCurrentTimestamp()
  		}
  
  		this.events.unshift( eventData );
  
  		console.log( eventData.timestamp, eventData.name, event );
  	}
  
  	private getCurrentTimestamp() {
  		return new Intl.DateTimeFormat( 'en', {
  			hour12: false,
  			hour: '2-digit',
  			minute: '2-digit',
  			second: '2-digit'
  		} ).format( new Date() );
  	}
  }

• Two-way data binding

  import {
  	Component,
  	ViewChild,
  	AfterViewInit,
  	ElementRef
  } from '@angular/core';
  
  import { NgForm } from '@angular/forms';
  
  @Component( {
  	selector: 'app-binding',
  	template: `
  		<h2>Two-way data binding</h2>
  		<p>
  			Using the <code>[()]</code> syntax, it is possible to create a simple two-way data binding between the CKEditor 4 WYSIWYG editor component and other components, for example the preview component that renders the content of the editor.
  		</p>
  
  		<p>
  			<label for="source-editor">The editor content:</label>
  		</p>
  
  		<p>
  			<textarea
  				id="source-editor"
  				class="source-editor"
  				(focus)="isSourceActive = true;"
  				(change)="isSourceActive = false; editorData = sourceData"
  				[(ngModel)]="sourceData">
  			</textarea>
  		</p>
  
  		<div class="editor-instance">
  			<ckeditor
  				#editor
  				[(ngModel)]="editorData">
  			</ckeditor>
  		</div>
  
  		<div class="editor-preview">
  			<h2>Rendered content</h2>
  			<div [(innerHtml)]="editorData" #preview></div>
  		</div>
  	`
  } )
  export class EditorBindingComponent implements AfterViewInit {
  	@ViewChild( 'editor' ) editor;
  
  	public editorData = '<p>This is a CKEditor 4 WYSIWYG editor instance created with Angular.</p>'
  
  	public isSourceActive: boolean;
  
  	public sourceData: string;
  
  	ngAfterViewInit() {
  		this.editor.dataChange.subscribe( ( value ) => {
  			if ( !this.isSourceActive ) {
  				this.sourceData = value;
  			}
  		} );
  	}
  }