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.
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
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.
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)"
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)
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 ✌
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 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.
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.
