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:

TS

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 {
    ClassicEditor
    .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 );
    } );
}

HTML

<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

HTML

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

TS

 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

4voto

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.

TS

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

HTML

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

HolaDevs.com

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:

X