5 votes

Duplicate modules in ckeditor for angular 4?

I am trying to add a ckeditor plugin to an inline-editor.

When I run it I get the following error: "Some CKEditor 5 modules are duplicated" And a link where it tells me what I have to do to fix it. https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

The solution I get from the web I have replicated it in my code and I still get the same error "Some CKEditor 5 modules are duplicated".

Attached is my code:


import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

ngOnInit(): void {
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic ],
        toolbar: [ 'bold', 'italic' ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );


<div id="editor"></div>

Previously I had it with the most optimal way with angular, but as when adding the plugins I got the same error, I opted to leave it the same as the link.

My previous code


<ckeditor (focus)="focusCkEditor()" (blur)="blurCkEditor()" class="matCkEditor top" matCkeditor
                        formControlName="cuerpo1" [editor]="Editor" [config]="config"></ckeditor>


 import * as InlineEditor from '@ckeditor/ckeditor5-build-inline';
 this.config = {
   plugins: [  ], //Al intentar añadir un plugin me salta error de duplicados
   toolbar: ['heading', '|', 'bold', 'italic', '|', 'undo', 'redo'],

   language: 'es'

I understand that with '@ckeditor/ckeditor5-build-inline' you can't add plugins because of the duplicity of modules.

What I don't understand is that leaving it as it is in the CkEditor solution I keep getting the same error.

Thank you very much.

1 votes

Did you remove the packages and reinstall them as recommended in the link ?

0 votes

Hello @FRANCISCOJ.BLANCO I had not done it, I did it and I got the same error. I managed to solve it by another method. Thank you very much


Jairo Rodero Villa Points 150

I have managed to add the plugin as needed. It's not the way I'm trying to put it in the question, but it still worked for me.

What I did was to download a build:

git clone -b stable https://github.com/ckeditor/ckeditor5-build-inline.git
cd ckeditor5-build-classic
npm install

and in it add the plugins I needed.

npm install --save-dev @ckeditor/ckeditor5-alignment

You add in src/ckeditor.js the necessary imports and build that folder with yarn run build

In the end, it is the same as it says in the library documentation: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build

Once in the code it is to follow the same ones you had from the beginning, but the editor import will now be where your custom build is.


import * as  InlineEditor from '../../../../assets/ckeditor5-build-inline';
export class AppDialogMailComponent implements OnInit {
  public editor = InlineEditor;


<ckeditor class="matCkEditor top" matCkeditor [editor]="editor"></ckeditor>


HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by: