Contribute to this guideReport an issue

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;
    			}
    		} );
    	}
    }