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. Let get started.

Setting up and configure 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 and 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

By 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 { }

Implment basic CKEditor in Angular: Angular ckeditor example

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 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 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.

ckeditor angular example

You can see from the above image, 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 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 CKEditor tag in our app.component.html template and here we need to add our CKEditor class configure value to the edit attribute. Let edit the app.component.html file.

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

<router-outlet></router-outlet>

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

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

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

Customizing 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.

ckeditor angular toolbar options

In the above image, we can see we have more toolbar options as compare to classic CKEditor angular. Angular CKEditor is flexible and we can easily add or remove tools in 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 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 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 events

Like any other text input event, we can add events like change, blur, focus, and more on our Angular CKEditor tag. Let 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 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 add angular template form with two field post title and post content.

We need to import formModules in the app.module.ts file and in our the 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 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);
  }
}

Conclusion
We have explored and learn 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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top