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.2Node = 14.17.0NPM = 7.14.0
Table of content
- Download the CKeditor custom builder.
- Create a new Angular project.
- Add CKEditor to angular project and build the CKEditor project.
- CKeditor model Integration with Angular project.
[ 1 ] — Download the CKeditor custom builder
Step 1: visit CKeditor online-builder page
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
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