Ckeditor5-angular: Using a CustomBuild with Angular Component

[IvanSGurdian]

I have been trying to make a CustomBuild for my Angular app without success.

Going through the documentation, I'm able to use the base Angular ckeditor component by importing the module. However, the ClassicEditor build that is installed doesn't have many features, so I used the online builder to create a build that includes all the plugins I needed.

I downloaded the generated file, which contains the build, src and sample folders; from what I understand, the idea is to include the ckeditor.js file from the build folder into my angular app, and import it where I want to use the component, like this:

import { Component, OnInit } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; ---> This is the regular build.
import * as Editor from '../../../../../core/libs/ckeditor5/build/ckeditor'; ---> This is the custom build file

@Component({
  selector: 'app-edit-article',
  templateUrl: './edit-article.component.html',
  styleUrls: ['./edit-article.component.scss']
})
export class EditArticleComponent implements OnInit {

  constructor() { }

// public Editor = ClassicEditor; ---> Instead of doing this;
    public Editor = Editor; // I do this

  ngOnInit() {}
}

But as soon as I change the declaration and try to run the app I get the following error:

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)
    at Module.<anonymous> (ckeditor.js:5)
    at i (ckeditor.js:5)
    at push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
    at ckeditor.js:5
    at ckeditor.js:5
    at Object../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
    at __webpack_require__ (bootstrap:84)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:30885)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

I'm not sure if I'm doing something wrong or what, but I've tried building the ckeditor.js file again and nothing happens.

Can anyone provide a clear example on how to create and import a custom build into an Angular application?

[ma2ciek]

Hi @IvanSGurdian,

Do you import these builds together?

Try to import only one of them. It should work.

[IvanSGurdian]

Hello @ma2ciek I did try removing the imports for the ClassicEditor build and still got the same error, also, if I have both imports like:

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

But I declare only the ClassicEditor like:
public Editor = ClassicEditor;

The component works fine

[IvanSGurdian]

@ma2ciek Seems I found the problem, so yes, it was due to multiple builds in the app. But more precisely because I was using two different builds (ClassicEditor, and my CustomBuild) in different parts of the application.

I thought that wasn't an issue since I had each Editor in different modules in the app, which are lazy loaded, but it still causes problems.

So just adding these two imports in the same file is not a problem

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

but actually using them both, even if on different components/modules/etc will throw the error, so just make sure that in the declaration you are using the same build on every component or module:

public Editor = Editor everywhere you use an editor.

_This WON'T 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;

[ma2ciek]

Yeah, unfortunately currently we don't allow to use multiple CKEditor 5 editors on the same page (even if it's a SPA). There's a hack-y check to ensure that some file is loaded only once as the duplication problem mainly touches a situation when the same files are loaded many times and are not reused which causes an infinite number of issues.

Good, that you find out what caused the problem in your app.

[IvanSGurdian]

It might be a good idea to point this scenario in the documentation if possible, since it does say that you should avoid multiple builds, but should also let the user know that this should be application-wide regardless of lazy-loaded modules. 😄

[ThenmozhiD]

Is there any updated on this ? Even, I want to do custom build in angular application.

Some one please clarify, whether it is possible to use the custom build editor without publishing here ??

[ma2ciek]

@ThenmozhiD, I don't understand what you mean. It's possible to use custom build in the Angular integration and that's described in docs. The whole issue is about docs for explaining how to allow adding multiple CKEditor 5 editors/builds in one SPA.

[iwoogy]

Hello

I followed the documentation to add a custom build and I encounter an issue described in :

• #122
• #146

Error: Uncaught (in promise): TypeError: this.editor.create is not a function

This is the link to the Stackblitz
https://stackblitz.com/edit/angular-ckeditor5-custom-editor

I was wondering what went wrong.

If someone can help, it would be great.

[ma2ciek]

Hi,

The above issue is probably a DUP of https://github.com/ckeditor/ckeditor5-angular/issues/146#issuecomment-545874446. The way how you need to import the built package depends on your typescript configuration.

[iwoogy]

On #146 it's about the ClassicEditor.

The Classic editor is working fine when the import statement is changed like suggestion in #146

In the current case, the idea is to build a custom editor with more editing options.

[ma2ciek]

I guess that the problem is the same. It touches all CKEditor 5 editors, custom editors as well.

[iwoogy]

I changed the import as suggested but I still got the error.

Import declaration seems to be correct.

[ma2ciek]

Do you try to create that editor from CKEditor 5 sources without building them perhaps? If that's the case it won't work unfortunately, because the webpack configurations for Angular and CKEditor5 differs. It's explained in the readme how to achieve it - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#using-a-custom-ckeditor-5-build.

If not, could you provide a repository or steps to reproduce the issue?

[iwoogy]

I've created a new stackblitz with the compile version of the custom CkEditor imported.

https://stackblitz.com/edit/angular-ckeditor5-custom-editor-with-build?file=src%2Fapp%2Fapp.component.html

These are the steps followed to build the stackblitz :

• Install the the package @ckeditor/ckeditor5-angular
  
• Declare CKEditorModule
  
• Add the source of the custom creditor build online
  https://ckeditor.com/ckeditor-5/online-builder/
  
• Add custom editor declaration
  
• Add component ckeditor in HTML
  
• The same error still persists “TypeError: this.editor.create is not a function”
  

[ma2ciek]

Hi,

As I said earlier, changing the import to import Editor from './ckeditor5/build/ckeditor'; fixes the error.

[iwoogy]

Hi

I've changed the stackblitz with all your recommendations.

It works now, thx.

[Cthulhu-28]

I followed all the steps and it worked perfectly. The only issue I have is that the language is french even though I selected spanish when creating the custom build using the online tool.

[harleenarora]

I have follow the steps, but getting error:: ERROR Error: Uncaught (in promise): CKEditorError: Cannot read property 'getAttribute' of null