Ckeditor5 custom build integration in angular application

Question

I am trying to use ckeditor 5 in my angular application. I have installed respected libraries and used. But default ckeditor5 only shows limited tools. So i am trying to integrate custom build using online builder link.

I followed below steps to build custom builder

1. I selected "classic editor"
2. Selected open source plugins which are needed for my editor
3. In tool bar configuration, i keep as default (Wrapped)
4. In installation step, i choose angular as technology, self hosted(npm) as integration method, Download project as output.

Now project got downloaded, i enter inside of this project and did npm install, If i ran that project using ng serve, i am able to see editor in browser

Then i did ng build to build the project. In side this project dist folder got created. Inside this folder i found ckeditor5-custom-project folder. Inside this folder found two files.

1. 3rdpartylicenses.txt (file)
2. browser (folder)

inside browser folder i found below three files

1. index.html
2. main-YKLNNTVL.js
3. polyfills-SCHOHYNV.js
4. styles-5INURTSO.css

So copy pasted this dist folder files in to my angular application inside the src > assets > ckeditor5 folder.

Now how can i use this folder in my angular application to display editor. Can any one suggest next steps or is i am following steps are correct? or did i mistaken any where ?

Found few tutorials in you tube but those are not related with current latest custom build. Means there is no ckeditor.js file in current version of custom build

Thank you

Answer 1

From this demo ckeditor5 repo https://github.com/ckeditor/ckeditor5-angular

I did below steps to implement customized ckeditor in my angular application.

1. In that repo i copied ./src/ckeditor and ./src/editor folders and pasted in my angular application under ./src/ folder.

2. Copy pasted required ckeditor5 packages from (package.json) above repo to my angular application. I already used another version of ckeditor5, so i removed that version and pasted new version packages.

3. Added ckeditor5/ckeditor5.css in my angular.json file under styles section.

4. In my xxx.module.ts file i added CKEditorModule under imports section. And imported from import { CKEditorModule } from 'src/ckeditor/ckeditor.module';

5. In my component html file i added below code

<ckeditor
                    formControlName="content"
                    [editor]="Editor"
                    (ready)="onReady($event)"
                    id="content"
                    name="content">
                  </ckeditor>

6. In my component ts file i added below things

import { AngularEditor } from 'src/editor/editor';

// Added below variables
public Editor = AngularEditor;
public editorInstance?: AngularEditor;

// Added below method
public onReady( editor: AngularEditor ): void {
        this.editorInstance = editor;
}

Note: in my application older default ckeditor5 used many places. So i got error like duplicate modules error. To resolve this i removed existing older packages from package.json and modified all components