How to implement Angular CKEditor in Angular?

In angular, we have different options to implement Angular-rich text editors like Angular CKEditor, TinyMCE, and more. The Angular-rich text editor is widely used to create form posts, comments, messaging applications, blogs, and more.

An angular-rich editor provides all tools need for a rich text editor, and it provides a clean user experience. Allows the user to use a wide variety of tools to edit and format rich content and returns valid HTML markup content. It also allows users to insert a to-do list, list, video, Youtube, images, links, tables, and more.

In this article, we’ll learn how to integrate CKEditor in Angular, how we can insert different tools in Angular CKEditor. The CKEditor angular allows us to insert different rich editor options and we can configure tools in CKEditor angular. We demonstrate two example of CKEditor using libraries ckeditor5-angular and ng2-ckeditor. Let get started.

Setting up and configuring Angular CKEditor project

As in this article, we’re using the CKEditor in angular we’ll explore how to add different toolbar options and set heights for our angular CKEditor using CSS styles. The CKEditor is an open-source modern JavaScript-rich text editor with a modular architecture. It provides a clean experience and we easily configure the toolbar in angular CKEditor it’s compatible with all modern web browsers. Let’s create our CKeditor angular project and install CKEditor.

ng new ckeditExample 
npm install --save @ckeditor/ckeditor5-angular

Executing the above command will create an angular project and install the CKEditor editor component for Angular. The CKEditor 5 is an Open Source javascript-rich text editor. We need to import CKEditor angular module in our app.module.ts file and let edit the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

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

Implement basic CKEditor in Angular

Let’s first demonstrate a simple CKEditor in our angular project, this is straightforward, it has all the basic toolbar options in CKEditor. The CKEditor has a few options like classic, inline editor, document, and more. In our first example, we’ll demonstrate a simple angular CKEditor using the classic editor and it has the most toolbar option which is needed for blogs and comments. Let’s install a classic editor in our Angular project.

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

Here is a screenshot of our CKEditor classic toolbar options.

You can see from the above image, that all toolbar options provided by CKEditor are classic options. If we want more options in our toolbar like a to-do list, font family option, and more, then we need to add each toolbar option in CKEditor. Let’s edit the app.component.ts file to import classic CKEditor.

import { Component, OnInit } from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  editor = ClassicEditor;

  constructor() { }
}

Now we need to add the CKEditor tag in our app.component.html template and here we need to add our CKEditor class configure value to the edit attribute. Let’s edit the app.component.html file.

<ckeditor name="myckeditor" debounce="300" [editor]="editor"></ckeditor>

<router-outlet></router-outlet>

How to set the height of CKeditor angular component for rich text editor

By default, Angular CKEditor has a small height we can change the angular rich text editor easily by adding the following CSS style value for the editor. Let’s edit the app.component.scss file to add CSS style for CKEditor angular.

:host ::ng-deep .ck.ck-editor__editable {
	min-height: 200px;
}

Customizing the CKEditor toolbar in Angular: Angular CKEditor example

The CKEditor classic has some of the basic tools for Angular rich text editor, we can configure to add or remove toolbar tools options in Angular CKEditor. We can have rich text editor tools like to-do lists, font families, quote, and more. Here is a screenshot of our Angular CKEditor tools options.

In the above image, we can see we have more toolbar options as compared to classic CKEditor angular. Angular CKEditor is flexible and we can easily add or remove tools in the angular text-rich editor. Let’s create a file called the ckeditor.js file we need to add the following toolbar options.

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight.js';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline.js';
import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak.js';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';

export default class Editor extends ClassicEditor { }


Editor.builtinPlugins = [
    Youtube,
    Autoformat,
    BlockQuote,
    Bold,
    CKFinder,
    CKFinderUploadAdapter,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    Italic,
    Link,
    List,
    MediaEmbed,
    PasteFromOffice,
    Table,
    TableToolbar,
    Alignment,
    FontColor,
    FontSize,
    FontFamily,
    FontBackgroundColor,
    Highlight,
    HorizontalLine,
    PageBreak,
    TableCellProperties,
    TableProperties,
    TodoList,
    Underline,
    WordCount,
    Essentials,
    Paragraph
];

We have to install each CKEditor tool in our Angular CKEditor project. Let’s add a few of the CKEditor tools for a demo, if you want to add all or want some of it then you need to install it.

npm i @ckeditor/ckeditor5-block-quote --save
npm i @ckeditor/ckeditor5-font --save
npm i ckeditor5-media-embed --save

Here we have demonstrated three examples of how to install CKEditor tools in our Angular CKEditor project. Now let’s consume our custom CKEditor rich text editor tools in our angular component.

import { Component, OnInit } from '@angular/core';
import Editor from './ckeditor5';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  customEditor = Editor;
  ckeConfig: any;

  constructor() { }

  ngOnInit(): void {
    this.ckeConfig = {
      toolbar: {
        items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList', 
        'numberedList', '|', 'insertTable', '|', 'undo', 'redo', 'imageUpload',
        ' classicEditor', 'blockQuote', 'list', 'mediaEmbed', 'pasteFromOffice',
        'fontFamily', 'todoList', 'youtube'
      ]
      },
      table: {
        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
      },
    };
  }
}

In our angular CKEditor configuration, we can add the toolbar option, if we didn’t add the toolbar name in the CKEditor configuration then it will not show in the Angular CKEditor toolbar. Let now edit the app.compnent.html template to add the Angular Ckeditor component tag.

<ckeditor name="myckeditor" [config]="ckeConfig" debounce="300"[editor]="customEditor">
</ckeditor>

Angular CKEditor 4 events

Like any other text input event, we can add events like change, blur, focus, and more on our Angular CKEditor tag. Let’s add a few of the events. Edit our component template.

<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" 
[editor]="editor" 	(change)="onChange($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)">data="<p>Hello world!</p>">
</ckeditor>

In our component typescript let’s add define Angular CKEditor events.

import { Component, OnInit } from '@angular/core';
import { ChangeEvent, BlurEvent } from '@ckeditor/ckeditor5-angular';
import ClassicEditor from './ckeditor5/build/ckeditor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  editor = ClassicEditor;

  public componentEvents: string[] = [];

  constructor() { }

  onChange(event: ChangeEvent): void {
    debugger
    console.log(event.editor.getData());
    this.componentEvents.push('Editor model changed.');
  }

  onFocus(event: FocusEvent): void {
    this.componentEvents.push('Focused the editing view.');
  }

  onBlur(event: BlurEvent): void {
    this.componentEvents.push('Blurred the editing view.');
  }
}

How to get data from CKEditor in angular?

Getting data from CKEditor in angular is easy, is the same as getting form text input. Let’s add an angular template form with two fields post title and post content.

We need to import formModules in the app.module.ts file and in our app.component.html template add the following form and two fields.

<form>
  <div class="form-group">
    <label>Blog Title</label>
    <input type="text" placeholder="Add post title" [(ngModel)]="postData.title" name="title" /> <br />
    <label>Blog Content</label>
    <ckeditor name="myckeditor" [(ngModel)]="postData.content" debounce="300" [editor]="editor" name="content">
    </ckeditor>
  </div>
  <div class="form-group">
    <button type="submit" (click)="savePost()">Save</button>
  </div>
</form>

Let’s edit the app.component.ts file typescript file to console log form data.

import { Component, OnInit } from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  editor = ClassicEditor;
  postData = { title: '', content: '' };
  ckeConfig: any;

  constructor() { }

  ngOnInit() {

    this.ckeConfig = {
      toolbar: {
        items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList',
          'numberedList', '|', 'insertTable', '|', 'undo', 'redo', 'imageUpload',
          ' classicEditor', 'blockQuote', 'list', 'mediaEmbed', 'pasteFromOffice',
          'fontFamily', 'todoList', 'youtube'
        ]
      },
      table: {
        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
      },
    };
  }

  savePost() {
    console.log(this.postData);
  }
}

CKEditor Angular example using ng2-ckeditor

We can have CKEditor in Angular using ng2-ckeditor, and it uses the CKEditor (4.x) WYSIWYG in your Angular application. Here is a screenshot of the Angular CKEditor 4 example.

How to add ng2-ckeditor is very important, here is an abstract step for adding the ng2-CKEditor in the Angular project.

1. Step 1, create an Angular project for CKEditor.
2. Step 2, Install ng2-ckeditor library and @types/ckeditor

npm i ng2-ckeditor
npm install --save @types/ckeditor

Step 3: Include CKEditor javascript files in your application in src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>RichEditor</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script src="https://cdn.ckeditor.com/4.18.0/full-all/ckeditor.js"></script>
    <script>
      CKEDITOR.config.forcePasteAsPlainText = true;
    </script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Step 4: Import CKEditorModule in the app.module.ts as follows.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CKEditorModule } from 'ng2-ckeditor';

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

Step 5: Configure the ng2-ckeditor options in the component typescript file in our case the app.component.ts file.

import { Component, OnInit, ViewChild } from '@angular/core';
import { CKEditorComponent } from 'ng2-ckeditor';

@Component({  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  name = 'ng2-ckeditor';
  ckeConfig: CKEDITOR.config;
  mycontent: string;
  log: string = '';
  
  @ViewChild('myckeditor') ckeditor: CKEditorComponent | undefined;

  constructor() {
    this.mycontent = `<p>My html content</p>`;
    this.ckeConfig = {
      allowedContent: false,
      extraPlugins: 'divarea',
      forcePasteAsPlainText: true,
      removePlugins: 'exportpdf',
    };
  }

  ngOnInit() {}
  onChange(event: any): void {
    console.log('onChange' + event);
  }

  onPaste(event: any): void {
    console.log('onPaste');
  }
}

In the app.component.html template let’s add the ng2-ckeditor tag.

<form role="form" #myForm="ngForm" accept-charset="UTF-8" novalidate>
  <div class="form-group has-feedback" 
        [ngClass]="{ 'has-error': myckeditor.invalid && myckeditor.touched }">
    <ckeditor [(ngModel)]="mycontent" 
              #myckeditor="ngModel"
              name="myckeditor"
              required
              [config]="ckeConfig" 
              debounce="500" 
              (paste)="onPaste($event)"
              (change)="onChange($event)">
    </ckeditor>
    <div *ngIf="myckeditor.invalid && myckeditor.touched" class="help-block">Required field.</div>
  </div>
  <button [disabled]="myForm.invalid" class="btn btn-primary">Save</button>
  </form>

  <div [innerHTML]="mycontent"></div>

Conclusion
We have explored and learned how to add and configure Angular CKEditor with two examples. I hope this article will give you some idea about how to use an Angular-rich text editor like CKEditor in your project.

Related Articles

• How to fix Firebase storage CORS issues in Angular and other frontend frameworks.
• How to add an Angular signature pad in Angular?
• How to install Angular material
• How to implement CKEditor in Angular
• How to use to implement HighCharts Angular