How to configure CKEditor 5 Rich text editor with Angular

Hello folks, In this article, I am going to discuss how to setup CKeditor rich text editor into your Angular project,

I am currently using the latest versions of Angular, Node and npm

Angular CLI = 12.0.2
Node = 14.17.0
NPM = 7.14.0

Table of content

1. Download the CKeditor custom builder.
2. Create a new Angular project.
3. Add CKEditor to angular project and build the CKEditor project.
4. CKeditor model Integration with Angular project.

[ 1 ] — Download the CKeditor custom builder

Step 1: visit CKeditor online-builder page

CKEditor 5 online builder | Rich text editor of tomorrow

Step 2: Choose Classic builder option

Step3: Choose the following plugins from the given list. These plugins doesn't need any CKeditor cloud support in order to use.

Step 4: Click Next button till you come to the following window

Note: Make sure not to add commercial plugins, which need the CKeditor cloud support, If you add any plugin mistakenly website will prompt the following message.

Step 5: Click start and download the custom CKeditor5 build

[ 2 ] — Create a new Angular project

Step 1: visit angular web site

Angular

Use the following command to install and run the angular project

Install angular cli globally

npm install -g @angular/cli

create project

ng new my-first-project 
cd my-first-project 
ng serve --open

[ 3] — Add CKEditor to angular project and build the CKEditor project.

In order to use the plugins of CKEditor5, We have build the project like an angular application.

Step 1: Extract the downloaded CKEditor zip file

Step 2: Add the extracted CKEditor folder into src folder of the Angular project

Step 3: Then open a terminal from that folder

Step 4: Install all the node packages

npm install

After successfully build you will able to see a new node_module file is available.

Step 5: Build the CKEditor project

npm run-script build

[ 4 ] — CKeditor model Integration with Angular project.

Step 1: Goto root directory of the angular project and install the ckeditor5-angular package

npm install @ckeditor/ckeditor5-angular --save

Step 2: import the installed module to app.module.ts

import { CKEditorModule } from ‘@ckeditor/ckeditor5-angular’;

add the module name to the imports as well

imports: [
    CKEditorModule
]

Step 3: Visit app.components.ts app.module.ts import the ckeditor.js

give the correct path to the ckeditor.js file

import * as customBuild from '../app/ckCustomBuild/build/ckeditor';

Please note that if your Angular version is below 9 or 9 you are required to do the following step in order to prevent the error occurred in the compile time.

"compilerOptions": {
    "allowJs": true,
    "target": "es2015"
    // other options
}

Step 4: Create a variable for gold the html data and assigned a simple value

public htmlData:string = "<p>Hello, world!</p>"

Next create a variable for the editor

public Editor = customBuild;

Create a variable for the CKEditor configurations. Here you can add all the selected plugins.

Visit app.component.html and define the ckeditor

<ckeditor [editor]="Editor" [config]="config" [(ngModel)]="htmlData"></ckeditor>

Final step is to serve the angular project

ng serve —- open

In Next post I will discuss how to add other 3rd party plugins to this project

nxviyx - Overview