How to integrate CKEditor with Angular | Custom build of CKEditor 5 | Rich text editor | Nirmal Gope

In this video all the steps are done by following official documentation of CKEditor 5 . Here we can learn how to make a custom build of this rich text editor.

[@cockatooadam]

you saved my life you dont even know how much i appreaciate this thanks bro to the moon back to india and back

[@nirmal_gope]

Thanks for your appreciation :)

[@gauravshrestha3136]

What is the angular version you are using

[@chinthuspillai4964]

But when doing the angular build its showing could not resolve this path issue . is there any specific steps needed to be done when doing angular build. also my custom build give ts files also

[@nirmal_gope]

It's hard to answer without seeing your project structure. I would recommend that you create a new project and follow the instructions in this video very carefully. If you miss a single step, then you may encounter an error. If your new project works, then compare it with your existing project to find out where you might have made a mistake. Best wishes.

[@sandroarzapalo9332]

Nice video! Thanks your so much. (PE)

[@rameshneelapala8152]

I am watching this videos step by step but error in ts "Cannot find module 'ckeditor5-custom-build/build/ckeditor' or its corresponding type declarations.ts(2307)"

[@nirmal_gope]

1. Have you imported the "CKEditorModule" in app.module.ts file? (in this video 2:30 min)
2. Have you renamed the dowloaded file to "ckeditor5-custom-build" ? (in this video 6:30 min)
3. Have you unpacked it into the project's main directory? (in this video 6:54 min)

[@Dhinakarp]

Could you guide me on how to add the **mention** plugin with a custom builder and how to integrate the same in angular ??

[@nirmal_gope]

Watch this video very carefully, then you can do it. Best of luck 🙂

[@sumansinha7338]

Can I add additional plugins in the downloaded build. If Yes then how?

[@nirmal_gope]

Follow the instructions of this video (specially from 4:00 min). Now delete or replace the existing folder of custom build plugins. Before making any changes to your CKEditor custom build, or adding new plugins as described, it's crucial to back up your project. This ensures that you have a recovery point in case something goes wrong during the process. Hope for the best ✌

[@valar_morghulism]

I am new to ckeditor. I have to create custom plugins. Can you help me creating custom plugins?

[@nirmal_gope]

Watch this video very carefully, then you can do it. Best of luck 🙂

[@durgeshchirmade2364]

i get a error of window not found and SSR error

[@nirmal_gope]

These problems typically occur in server-side rendering (SSR) environments like Angular Universal, where JavaScript code tries to access the window object or other browser-specific globals that don't exist in a Node.js server environment.

[@avilio7015]

@@nirmal_gope is there any solution to that, i really need SSR for my project but im unable to use any rich text editor

[@nirmal_gope]

@@avilio7015
Import the CKEditorModule into the module where you intend to use the editor.
@NgModule({
imports: [BrowserModule.withServerTransition({ appId: 'serverApp' }), CKEditorModule],
})
Since CKEditor relies on the browser's DOM, you need to ensure it is only loaded and instantiated in the client-side environment. This can be managed by using Angular's platform ID to check if the code is running on the server or the client.
import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
@Component({
selector: 'app-root',
template: ``
})
export class AppComponent {
public Editor = ClassicEditor;
public isBrowser: boolean = false;
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
this.isBrowser = isPlatformBrowser(this.platformId);
}
}
Remember to conditionally load CKEditor components and scripts only on the client side.Ensure that during server-side rendering, CKEditor does not attempt to execute any code that would require a DOM. Test your application in both server-rendered and client-side scenarios to ensure stability and functionality.

[@paulh6933]

CKEditor 5 is not free, correct?

[@nirmal_gope]

No. If you use premium plugins on it, you have to pay. Otherwise it's free.

[@curtiss5781]

your intro sound is not enjoyable

[@nirmal_gope]

Thank you for sharing your thoughts about the intro sound. I always appreciate feedback as it helps me improve.

[@SonaliAkshatPathak]

ckeditor.js:6 Uncaught CKEditorError: ckeditor-duplicated-modules can u plz help me

[@nirmal_gope]

It indicates that there are duplicated CKEditor modules being imported or instantiated in your project. Ensure that you haven't imported CKEditor modules more than once across your Angular application. This includes checking all scripts in your index.html, Angular component files, and any dynamically loaded scripts that might be adding CKEditor again. Ensure all CKEditor-related packages are up to date and compatible with each other. You might need to update or downgrade some packages to achieve compatibility.

[@chadcummings4600]

Good video, but I noticed you skipped the step where they say to install the ckeditor5-custom-build `npm install ./ckeditor5-custom-build`

[@nirmal_gope]

Watch this part (7:08) very carefully in this video.