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

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.

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 :)

NOTE: We don't use @ckeditor/ckeditor5-build-classic any more!

Wrong: import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Correct: import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

I had a similar problem. I solved it when I installed all modules of one version

I've face this issue when tried to use an editor on different pages few times. Tried everything what is written above, nothing helped. To solve the issue I used a React lazy loading for importing an editor.