0

tengo una duda sobre como instalar el plugin “Word count and character count” de ckeditor 5, quiero implementarlo en un proyecto con larevel 5.8. Los pasos que seguí según la documentación fueron los siguientes:

  • Clonar el repositorio git clone -b stable https://github.com/ckeditor/ckeditor5
  • Después hice un cd donde quedo instalado el repositorio: cd public/custom_ckeditor/ckeditor5/packages/ckeditor5-build-classic
  • Instale dependencias: npm install
  • Y a continuación instalé el plugin: npm install --save-dev @ckeditor/ckeditor5-word-count (todo esto lo hice sin salir de la carpeta anterior, es decir de ckeditor5-build-classic)
  • Después agregue el import del plugin y el plugin en el archivo ckeditor5\packages\ckeditor5-build-classic\src\ckeditor.js
  • Luego hice un npm run build (tambien dentro de ckeditor5-build-classic)

mi duda es como llamar al ckeditor que acabo de instalar con su respectivo plugin?, antes de querer utilizar el plugin instale ckeditor atraves de npm y lo llamaba desde resources/js/app.js de la siguiente forma:

const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );

ClassicEditor
    .create( document.querySelector( '#content' ),{
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable' ]
    })
    .then( editor => {
        editor.editing.view.change(writer=>{
            writer.setStyle('height', '200px', editor.editing.view.document.getRoot());
        },);
    } )
    .catch( error => {
        console.error( error );
    } );

intente llamarlo asi:

require('./bootstrap');
const ClassicEditor = require("../../public/custom_ckeditor/ckeditor5/packages/ckeditor5-build-classic/src/ckeditor" );

ClassicEditor
    .create( document.querySelector( '#content' ),{
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable' ]
    })
    .then( editor => {
        editor.editing.view.change(writer=>{
            writer.setStyle('height', '200px', editor.editing.view.document.getRoot());
        },);
    } )
    .catch( error => {
        console.error( error );
    } );

pero me tira muchos errores al momento de hacer un npm run dev, los errores son parecidos a este:

Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css' in 'public\custom_ckeditor\ckeditor5\packages\ckeditor5-build-classic\node_modules\@ckeditor\ckeditor5-media-embed\theme'

no los pongo todos porque de verdad que son muchos, pero todos son iguales solo cambia la ruta donde hace referencia al modulo de ckeditor.

Que hice mal? o como llamo de forma correcta al ckeditor en mi app.js?

5
  • Me parece que estás apuntando al directorio del código fuente del plugin que has modificado y no al directorio donde está la versión compilada con npm run build
    – Lobos
    Commented el 1 jun. 2021 a las 15:45
  • @lobos el directorio donde esta compilado es en node_modules? es decir @ckeditor/ckeditor5-build-classic? lo llamo, intento hacerlo funcionar, me dice que CKEditorError: plugincollection-plugin-not-loaded, lo agrego y me sigue saliendo lo mismo :(
    – Mrnew
    Commented el 1 jun. 2021 a las 16:10
  • @lobos cuando instalo el plugin con el npm install, lo hice dentro del directorio de ckeditor-build-classic que clone, esta correcto esto? o se debe instalar en el directorio raiz del proyecto?
    – Mrnew
    Commented el 1 jun. 2021 a las 16:17
  • Estás apuntando al directorioi src en ../../public/custom_ckeditor/ckeditor5/packages/ckeditor5-build-classic/src/ckeditor y tienes que apuntar al directorio build. Sería de cambiar el src por build
    – Lobos
    Commented el 1 jun. 2021 a las 16:32
  • ahora me compilo pero no me funciona el ckeditor, en la consola me sale el eror: Uncaught TypeError: ClassicEditor.create is not a function
    – Mrnew
    Commented el 1 jun. 2021 a las 16:46

1 respuesta 1

0

Solucione el error, gracias a @Lobos por su respuesta, solo tenia que llamar al ckeditor de la siguiente forma:

require( '../../public/custom_ckeditor/ckeditor5/packages/ckeditor5-build-classic/build/ckeditor.js' );

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.