I am currently in the process of developing an article editor, utilizing the Angular Integration for CKEditor5. By following the provided documentation, I have successfully implemented the ClassicEditor build with the ckeditor component.
Below are the essential files:
import { Component, OnInit } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
selector: 'app-edit-article',
templateUrl: './edit-article.component.html',
styleUrls: ['./edit-article.component.scss']
})
export class EditArticleComponent implements OnInit {
constructor() { }
public Editor = ClassicEditor;
articleForm: FormGroup;
ngOnInit() {
}
}
Template
<div class="row">
<div class="col-12">
<label for="">Content</label>
<ckeditor [editor]="Editor" id="editor" class="blue-scroll--light" formControlName="content"></ckeditor>
</div>
</div>
However, I encountered a limitation with the ClassicEditor build as it lacks several necessary plugins like text alignment, font color, and font size. In order to address this issue, I attempted to create a custom build incorporating all the desired features using the online builder provided by CKEditor. Yet, integrating this custom build into my Angular App proved challenging due to unclear documentation.
As per my understanding, I needed to include the build folder within my Angular project and import the ckeditor.js file into my component as follows:
import * as Editor from '../../../../../core/libs/ckeditor5/build/ckeditor';
Subsequently, I updated the declaration of the Editor variable to use this new import instead of the default ClassicEditor:
public Editor = Editor;
Unfortunately, upon implementing these changes, my application failed to run and presented the following error message:
ERROR Error: Uncaught (in promise): CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
at Object.<anonymous> (ckeditor.js:5)
at Object.push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
at i (ckeditor.js:5)
...
I believe this error stems from conflicting imports, despite only utilizing the ckeditor.js file included in the custom build. Strangely, this file works perfectly when referenced in a standalone HTML document.
Seeking guidance, can someone offer insights or provide a clear example on effectively integrating a Custom Build within an Angular App?