Using CKEditor5 Custom Build in Angular App

user_8437694 0
Viewed 4071

I'm building a sort of article editor, for this I'm using the Angular Integration for CKEditor5; following the documentation I can correctly use the ClassicEditor build with the ckeditor component.

These are my 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>

Unfortunately, the ClassicEditor build referenced in that guide does not include many plugins, so I'm trying to add some of them, like text alignment, font color, font size, etc.

It seems that I need to create a custom build which includes all of the desired features and then reference that build instead of the ClassicEditor in my typescript file if I understand correctly, so I went ahead and used their online builder to create a build with all the plugins already included, but after that I'm not sure how to proceed and the documentation isn't really clear.

As far as I understand, I need to add the build folder inside my Angular App and then import the ckeditor.js file in my component, like this:

import * as Editor from '../../../../../core/libs/ckeditor5/build/ckeditor';

and change the declaration of the Editor to use that import instead of the ClassicEditor, so:

public Editor = Editor;

However as soon as I make that change I'm no longer able to even run the app, since 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)

Again, the docs say it is due to multiple imports being made but I don't understand how since I'm only using the ckeditor.js file that comes in the build I just generated, which works fine if referenced in a plain HTML file.

Can someone provide an example on how to successfully make a Custom Build work in a Angular App?

angular typescript ckeditor javascript
2 Answers

After a while, I found that the problem seems to be that I had another build imported in a different module of my application.

So I was only using the custom build inside my EditArticle component by importing and using that file, but I also had other components on other modules that were importing and using the ClassicEditor build that I installed through NPM, which looks like it was causing the error.

The fix was not to remove the ClassicEditor package nor removing the import ClassicEditor statement, but just making sure that that specific import was not being used anywhere else in the app, since I guess during compilation Angular removes all unused imports.

Once I did this, the application ran fine with my custom build.

Just to clear it up, I can have these two imports on the same file or multiple components

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

But I should only be using one of them on the entire app, so if I have an Editor on Component1 and on Component2, I can have both builds imported, but on the declaration of the Editor property I should only use one, and it should be the same one on every component the app uses, so:

This works

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 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;

You can of course just remove the unused build from the imports altogether and that'll work too. Just again, make sure you use the same build on all the application

user_84376940 
     console.log(this.ckEditorClassic.builtinPlugins.map( plugin => plugin.pluginName ));
  }

This will give you the list of plugins in the custom build. 
My sample has :
["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] }"
user_148670840
Related