Angular Rich Text Editor

Angular Rich Text Editor is the official CKEditor 5 Angular component. The component exposes properties for quick integration of the WYSIWYG editor into Angular-based applications.

Versatile

An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.

Extensible

Modular architecture where everything is a plugin. You can tune up, add, or remove plugins as you wish. Use custom processors to handle HTML, Markdown, or JSON output.

Progressive

Takes advantage of a superb team of 50+ industry experts and 20+ years of experience in WYSIWYG editing. We are releasing new features every month.

Trusted and approved by

See Engine in action

Try our custom inspector below to see how CKEditor 5 works under the hood. Verify the output,
see a document model, and run commands from the inspector without leaving the browser.

Simple setup

Here is a quick example of how to use the Angular Rich Text Editor
component for CKEditor 5 with the Angular CLI!

1

Create a project

Create a project using a basic Angular CLI template and change
the working directory to a newly created project.

npx @angular/cli new ckeditor5-angular-example && cd ckeditor5-angular-example
2

Install packages

Install dependencies to the Rich Text Editor Angular Component and your chosen Editor Type
according to the editing experience of your preference. In this case, we use the classic CKEditor 5 build.

npm install --save @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic
3

Add a file

Add a file in src/app/typings.d.ts with the following code:

declare module '@ckeditor/ckeditor5-build-classic' {
  const ClassicEditorBuild: any;
  export = ClassicEditorBuild;
}
4

Add component

Replace the contents of src/app/app.component.ts with the code responsible for controlling the editor.

import { Component } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'angular-template-ckeditor5-classic';
  public Editor = ClassicEditor;
  public onReady(editor: any) {
    console.log("CKEditor5 Angular Component is ready to use!", editor);
  }
  public onChange({ editor }: ChangeEvent) {
    const data = editor.getData();
    console.log(data);
  }
}
5

Add module

Replace the contents of src/app/app.module.ts with the code responsible for managing components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
6

Add a template

Replace the contents of src/app/app.component.html with the template containing the editor component.

<header class="inverted">
  <h2>CKEditor 5 Classic in Angular</h2>
</header>
<div class="content" role="main">
  <ckeditor
    [editor]="Editor"
    data="<p>Hello from CKEditor5!</p>"
    (ready)="onReady($event)"
    (change)="onChange($event)"
    >
  </ckeditor>
</div>
<section class="inverted">
  <p>Edit <code>src/app/app.component.ts</code> and save to reload.</p>
  <a href="//ckeditor.com/docs/ckeditor5/latest/installation/frameworks/angular.html">See docs</a>
</section>
7

Done!

Run the app by executing the following command in your project’s directory.

npm run start

Want to learn more about CKEditor?

We use cookies and other technologies to provide you with a better user experience.

Learn more about cookies policy

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });