5

Estoy intentando añadir un plugin de ckeditor a un inline-editor.

Cuando ejecuto me aparece el siguiente error: "Some CKEditor 5 modules are duplicated" Y un enlace donde me dice que tengo que hacer para solucionarlo https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

La solución que obtengo en la web la he replicado en mi código y aún asi me sigue saliendo el mismo error."Some CKEditor 5 modules are duplicated"

Adjunto mi código:

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>

Anteriormente lo tenía con de la manera mas optima con angular, pero como al añadir los plugins me aparecía el mismo error, opte por dejarlo igual que el enlace.

Mi código anterior

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

Entiendo que con '@ckeditor/ckeditor5-build-inline' no se puedan añdir plugins por la duplicidad de modulos.

Lo que no llego a entender, es que dejandolo tal cual esta en la solución de CkEditor me siga saltando el mismo error.

Mucahs gracias.

2
  • 1
    Eliminaste los paquetes y los volviste a instalar como lo recomienda el link ? Commented el 4 dic. 2019 a las 15:59
  • Hola! @FRANCISCOJ.BLANCO No lo había hecho, lo hice y me dio el mismo error. Lo conseguí solucionar por otro método. Muchas gracias Commented el 5 dic. 2019 a las 14:11

1 respuesta 1

4

He conseguido añadir el plugin como necesitaba. No es la forma que intento plantear en la pregunta, pero igualmente me ha servido.

Lo que hice fue descargarme un build:

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

y en ella añadir los plugins que yo necesitaba.

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

Se añade en src/ckeditor.js los imports necesarios y buildeas esa carpeta con yarn run build

Al final, es lo mismo que pone en la documentación de la librería: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build

Una vez en el código es seguir los mismos que tenía desde un principio, pero el import del editor ahora será donde este tu build personalizado.

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.