CKEditor, Instalar NPM y Configurar el build en un proyecto en Laravel - 4

▶

El siguiente paso ya es empezar a copiar lo que generamos anteriormente:

https://ckeditor.com/ckeditor-5/builder/

El build que ya yo tengo por aquí descomprimido cualquiera de ellos ahorita de igual manera vemos el contenido por si no sabes exactamente cuál es en nuestro proyecto así que qué es lo primero que tenemos que hacer aquí para cuando estamos trabajando con este tipo de proyectos entiend es un proyecto en que tenemos ya prácticamente listo el build que hicimos en editor y lo queremos exportar a nuestro proyecto recordemos un poco que laravel ya tiene una integración con node y por lo tanto esto puede ser bastante directo Entonces lo primero que tenemos que ver aquí es qué es lo que tenemos aca en el package.json, la dependencia de ckeditor:

$ npm i ckeditor5

Mientras tanto cuáles son los que vamos a requerir de acá la única hoja de estilo que tenemos y aquí el de main voy a copiar y los va a renombrar 

resources\js\ckeditor.js
resources\css\ckeditor.css
 

Importaciones y comentarios en el código

Tenemos aquí las importaciones. Desde esta sección ya se empiezan a importar las dependencias. Esto de hecho tampoco iría, y usualmente los comentarios —creo que es lo mejor que puedes hacer— cuando ya esté todo listo y lo hayas probado, ahí sí puedes limpiarlos. Pero yo creo que es buena idea comentarlo desde el principio.

Un truco que yo uso es colocar dos símbolos de comentario (//) al inicio, para saber que ese comentario es mío y no uno que vino por defecto con el plugin. Cuando veo esos dos comentarios, ya sé que son míos, y luego los elimino fácilmente si ya no hacen falta.

Configuración de Vite

En el caso de Vite, es importante tener en cuenta la configuración. Creo que esto ya lo expliqué antes, pero básicamente, cuando empleamos Vite —que en este caso va a ser el "compilador", por así decirlo—, lo que hace es interpretar nuestra transpilación (creo que esa es la palabra correcta). Es decir, traduce nuestro CSS a otro CSS que el navegador pueda entender.

Un compilador sería, por ejemplo, Java, que toma un archivo .java y lo compila a código binario. Pero en este caso, se mantiene el mismo tipo de código, como pasar de JavaScript moderno a una versión que entienda el navegador, o de SCSS a CSS.

Aquí en la configuración colocamos los archivos que queremos que Vite interprete. En este caso serían los que definimos anteriormente. También indicamos la ruta correspondiente:

vite.config.js

export default defineConfig({
   plugins: [
       vue(),
       laravel({
           input: [
               ***
               'resources/css/ckeditor.css',
               'resources/js/ckeditor.js'
           ],
           refresh: true,
       }),
   ],
});

Claro está js editor y ccs editor es lo que estoy colocando por acá ya con esto vamos a intentar arrancar la aplicación no hemos configurado todavía como tal el plugin pero ahí lo tenemos.