CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

Question

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

Getting ckeditor 5 duplicate modules error. Anyone can help me. Thanks in Advance.

Answer 1

It's because you are importing the plugin with the build ! In order to add plugins, you have to make a personnal build. Please read this page to know more about it : ckeditor offical documentation. They even have an official online builder that does all the work for you ! : ckeditor online builder Once you created it, you have to import the editor just as you have done before on line 2 but instead of writing from "@ckeditor/ckeditor5-build-classic" you have to write from "adress of the build folder of your personnal build".

I hope it helped you.

Answer 2

I had this problem when I tried to add CKEditor and a plugin separately. the easiest way is go to CKEditor Online Builder and choose what plugins and toolbar items you need then after five steps the code that you need to work with is generated.

Then you can use the file named ckeditor.js in build folder and this is almost all that you need.

1- Add CKEditorModule

@NgModule({
  imports: [CKEditorModule],
...
}

2- Add the CKEditor tag to your template

<ckeditor
   [editor]="Editor"
   [(ngModel)]="notification.body"
   (ready)="onReady($event)"
   [config]="config"
></ckeditor>

3- import the customized CKEditor js file(that you should copy from build folder in downloaded customized CKEditor)in your component

import * as customEditor from './ckeditor';

4- Create a property in your component

 public Editor = customEditor;

5- Add your configs

 ngOnInit() {
   
    this.config = {
      toolbar: {
        items: [
          'heading',
          '|',
          'fontSize',
          'fontFamily',
          '|',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'highlight',
          '|',
          'alignment',
          '|',
          'numberedList',
          'bulletedList',
          '|',
          'indent',
          'outdent',
          '|',
          'todoList',
          'link',
          'blockQuote',
          'imageUpload',
          'insertTable',
          '|',
          'undo',
          'redo'
        ]
      },
      language: 'en',
      image: {
        toolbar: [
          'imageTextAlternative',
          'imageStyle:full',
          'imageStyle:side'
        ]
      },
      table: {
        contentToolbar: [
          'tableColumn',
          'tableRow',
          'mergeTableCells'
        ]
      },
      licenseKey: '',
      wordCount: {
        onUpdate: stats => {
          this.charactersLength = stats.characters
        }
      }
    }
  }

That's it :)