Incorporating a Custom CKEditor5 Build into an Angular Application

Question

Incorporating a Custom CKEditor5 Build into an Angular Application

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?

javascript angular typescript ckeditor

Answer 1

Answer №1

Upon investigation, I discovered that the issue stemmed from having another build imported in a different module of my application.

While I was solely utilizing the custom build within my EditArticle component by importing and utilizing that file, there were other components in separate modules importing and using the ClassicEditor build installed through NPM, which appeared to be causing the error.

The solution did not involve outright removing the ClassicEditor package or the import ClassicEditor statement. Instead, it required ensuring that the specific import was not utilized elsewhere in the app as Angular likely removes all unused imports during compilation.

After rectifying this, the application functioned smoothly with my custom build.

To clarify, both these imports can coexist in the same file or across multiple components:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

However, only one should be actively used throughout the entire app. For instance, if an Editor exists in both `Component1` and `Component2`, both builds can be imported but only one should be designated for use in the Editor property declaration across all components:

This setup is effective:

Component1

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

Component2

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

This configuration will NOT work:

Component1

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

Component2

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = ClassicEditor;

If preferred, eliminating the unused build from the imports entirely is also a valid approach. Just remember to maintain consistency by using the same build throughout the application.

Answer 2

Upon investigation, I discovered that the issue stemmed from having another build imported in a different module of my application.

While I was solely utilizing the custom build within my EditArticle component by importing and utilizing that file, there were other components in separate modules importing and using the ClassicEditor build installed through NPM, which appeared to be causing the error.

The solution did not involve outright removing the ClassicEditor package or the import ClassicEditor statement. Instead, it required ensuring that the specific import was not utilized elsewhere in the app as Angular likely removes all unused imports during compilation.

After rectifying this, the application functioned smoothly with my custom build.

To clarify, both these imports can coexist in the same file or across multiple components:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

However, only one should be actively used throughout the entire app. For instance, if an Editor exists in both `Component1` and `Component2`, both builds can be imported but only one should be designated for use in the Editor property declaration across all components:

This setup is effective:

Component1

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

Component2

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

This configuration will NOT work:

Component1

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

Component2

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = ClassicEditor;

If preferred, eliminating the unused build from the imports entirely is also a valid approach. Just remember to maintain consistency by using the same build throughout the application.

Answer 3

Answer №2

     console.log(this.customEditor.pluginsList.map( plugin => plugin.pluginName ));
  }

Gather the list of plugins from the custom editor build. 
The custom editor includes :
["Alignment", "AutoImage", "Autoformat", "Autosave", "BlockQuote", "Bold", "CodeBlock", "Essentials", "ExportPdf", "ExportWord", "FontBackgroundColor", "FontColor", "FontFamily", "FontSize", "Heading", "Highlight", "HorizontalLine", "Image", "ImageCaption", "ImageInsert", "ImageResize", "ImageStyle", "ImageToolbar", "ImageUpload", "Indent", "IndentBlock", "Italic", "Link", "List", "Markdown", "MathType", "MediaEmbed", "MediaEmbedToolbar", "PageBreak", "Paragraph", "PasteFromOffice", "SpecialCharacters", undefined, undefined, undefined, undefined, undefined, "Strikethrough", "Subscript", "Superscript", "Table", "TextTransformation", "WordCount"]


take the displayed list within [] and replace xxxx with it.

<ckeditor [config]="{toolbar:[xxxx] }"

Answer 4

     console.log(this.customEditor.pluginsList.map( plugin => plugin.pluginName ));
  }

Gather the list of plugins from the custom editor build. 
The custom editor includes :
["Alignment", "AutoImage", "Autoformat", "Autosave", "BlockQuote", "Bold", "CodeBlock", "Essentials", "ExportPdf", "ExportWord", "FontBackgroundColor", "FontColor", "FontFamily", "FontSize", "Heading", "Highlight", "HorizontalLine", "Image", "ImageCaption", "ImageInsert", "ImageResize", "ImageStyle", "ImageToolbar", "ImageUpload", "Indent", "IndentBlock", "Italic", "Link", "List", "Markdown", "MathType", "MediaEmbed", "MediaEmbedToolbar", "PageBreak", "Paragraph", "PasteFromOffice", "SpecialCharacters", undefined, undefined, undefined, undefined, undefined, "Strikethrough", "Subscript", "Superscript", "Table", "TextTransformation", "WordCount"]


take the displayed list within [] and replace xxxx with it.

<ckeditor [config]="{toolbar:[xxxx] }"

Incorporating a Custom CKEditor5 Build into an Angular Application

Answer №1

Answer №2

Similar questions

The mysterious anomaly in Vue.js

Generate a CSV file using Javascript

Incorporate the block-input feature from sanity.io into your next.js blog for enhanced functionality

Having trouble implementing pagination for news-api in Vue.js2?

Guide on handling asynchronous data return within a reducer

Ways to deactivate selecting rows in a datatable

What is the correct way to declare a class as global in TypeScript?

Obtaining HTML elements from JSON using jQuery (i.e., the opposite of serializing with Ajax)

Creating a javascript function to update content on click

What causes duplicate packages to appear in Bower at times?

Capturing screenshots with Selenium in Node.js is proving to be quite sluggish

What is the process of generating enum values using ES6 in Node.js?

How can I create a Material ui Card with a border-less design?

How can JavaScript allow access to files outside of a web server environment? Could .htaccess provide a

react-leaflet LayerSelection creates redundant entries in table

Using JSTL tags may result in returning null or empty values when making Javascript calls or populating HTML

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

What is the best way to transform a list of Python+Flask objects into a list of JavaScript objects?

What is the best way to import and export modules in Node.js when the module names and directories are given as strings?

In JavaScript, generate a new column when the text exceeds the height of a div