Laravel Livewire - Instalar y Configuración Inicial de CKEditor NPM

Al trabajar con JavaScript, es prácticamente imposible que no necesites instalar plugins para funcionalidades específicas, ya sea usando la CDN o Node; plugins como para especificar texto enriquecido (WYSIWYG), drag and drop, calendarios, y un largo etc; seguramente te va a interesar saber cómo los puedes integrar en Laravel Livewire y de aquí la importancia de conocer cuales son los pasos que debes de seguir.

En este libro, vamos a integrar CKEditor como plugin de terceros en Livewire, pero, con esto, podrás conocer perfectamente cuales son los pasos a seguir cuando quieres utilizar otros plugins y que necesites comunicar el plugin con Livewire.

Es importante notar que, debemos de conocer la fase de actualización del plugin y en ese momento, replicar los cambios a propiedades o métodos de Livewire, y eso es lo que se trata de reflejar en el siguiente apartado.

CKeditor

CKEditor no es más que un plugin para el contenido enriquecido, si queremos agregar textos, imágenes, listas, tablas, enlaces, entre otros aspectos, este tipo de plugins son estupendos para tal fin.

Generalmente se usan cuando quieres crear post para un blog o similares.

Instalar

Para instalarlo, podemos ir a la siguiente página:

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

Selecciona cualquiera de los formatos listados, te recomiendo el de Classic Editor y pendiente de desactivar las características premium a menos que quieras pagar:

Características premium en CKEditor

Una vez seleccionado las características que quieras, debes presionar Next hasta que llegues a la ventana final en donde puedes descargar la solución:

Configurar

Click en descargar y lo importante de la solución anterior, es el archivo de main.js, que debemos de copiar en el proyecto:

resources/js/ckeditor.js

En el archivo mencionado, se encuentra la configuración del CKEditor, así como las importaciones, configuración de los plugins, cabecera y demás, como punto importante, tenemos la referencia a el módulo de ckeditor:

***
	Undo
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';

Que debemos de instalar:
 

$ npm install ckeditor5

También, comenta o remueve la importación del css definida en el mencionado archivo:

// import './style.css';

Agregamos la nueva dependencia o archivo en vite:

vite.config.js

input: [
    'resources/css/app.css',
    'resources/js/app.js',
    'resources/js/ckeditor.js',
],

Y con esto, ya estamos listos para usarlo, vamos a agregar el HTML necesario para el CKEditor, que no es más que un simple DIV, junto con un DIV de nivel superior para la alineación en base a las columnas:

resources/views/livewire/dashboard/post/save.blade.php

***
<div class="col-span-10 sm:col-span-6">
    <x-label for="">Text</x-label>
    <div id="ckcontent">{!! $text !!}</div>
</div>
***

Al final del componente, agregamos el script del CKEditor y para crear el mismo:

***
    </x-form-section>
    <script src="{{ asset('js/ckeditor/ckeditor.js') }}"></script>
        @vite(['resources/js/ckeditor.js'])
    </div>
</div>

Con esto ya tendremos el CKEditor funcionando:
 

Aunque en versiones recientes de Laravel Livewire no debe de existir problemas de actualizar el componente mediante Livewire al escribir sobre algún elemento HTML wire:model, en caso de que necesites realizar alguna actualización antes de enviar el formulario (es decir, cuando en la consola de desarrolladores, en la sección de network vemos peticiones, se redibuja el componente afectado que en este ejemplo sería el de guardado), puedes especificar el siguiente atributo:

<div wire:ignore class="col-span-6 sm:col-span-4">
    <div id="ckcontent">{!! $text !!}</div>
</div>

Transcripción del vídeo

Vamos a conocer los pasos para poder descargar CkEditor en nuestra aplicación para que luego la podamos instalar. Antes que nada vamos a escribir aquí CKEditor en caso de que no lo conozcas lo colocas en Google.

Sobre CKEditor - WYSIWYG

Lo primero que quiero comentarte de la extensión el plugin es que es el bueno como quien dice o yo lo veo como la referencia lo que se refiere a los plugins de tipo what you see what you get es decir lo que ves es lo que obtienes en html5 o en html en general es decir en tecnologías web y este plugin lo que permite y esto lo puedes ver facilito desde la parte de demos es crear una caja con la cual nosotros podemos crear contenido enriquecido y de aquí un poco su nombre a la final todo esto es html y podemos crear todas estas cosas claro dependiendo de la característica que quieras habilitar por ejemplo la carga de imágenes ahí tús que realizar configuraciones adicionales ya que no todo es solamente formato es decir negritas itálico h1 h2 hx párrafos etcétera Hay cosas que requieren una integración adicional como es la parte de las imágenes que eso no lo voy a tratar en este curso es esto básicamente hay muchos plugin de este estilo Es decir de tipo what you see what you get Puedes escribir aquí what you see is what you get javascrip y vas a encontrar muchos resultados entre ellos el primero tenemos bueno el segundo CKEditor Tenemos muchos puede que te guste otro no sé lo que sea pero esto yo lo agarro Porque para mí es una referencia tiene muchísimo tiempo en el mercado tiene una estructura bastante sólida extremadamente personalizable y es las consideraciones que yo tomo para utilizarlo a diferencia de otros que puede que no tengan tanto tiempo directamente no tiene tantas características como CKEditor.

La mala noticia de sec editor Es que a veces las configuraciones se hacen un poco necias a veces empieza a generar algunos html que no debería o que uno no pensaría y también que la instalación aquí la van cambiando a cada rato por Dios por ejemplo Aquí yo en el libro tengo ya esto quedó desactualizado para la versión 37 El Paso era venía aquí en la a la página de descargas escogía lo descargaba y Listo ya tenía una carpeta lista para poder configurar aquí Y a partir de ahí empezar la configuración esta carpeta. También la puedes generar pero ya también cambió un poco las importaciones y demás internamente y no lo he podido lograr mediante este formato entonces también lo actualicé un poco.

Vas al siguiente enlace:

https://ckeditor.com/ckeditor-5/builder/
Y selecciona alguna opción que no tenga caracteri características premiums aquí estas extensiones o características algunas son premiums y otras son de pago algunas son premiums y otras son gratuitas por lo tanto a menos que no quieras pasar por caja como en mi caso no queremos pasar por caja tenemos que ir por las gratuitas realmente puedes seleccionar cualquiera y e ir deshabilitando características.

Pasos a seguir para Laravel y Livewire

Aquí también es importante aclarar que estos pasos son los mismos que emplearías en Laravel básico en inertia también pero varía un poquito la parte con Vue Que obviamente ya aquí tuviéramos que colocar el conector con View Pero bueno aquí sería a ver si creo que es esta la de Note damos aquí a descargar y aquí damos aquí a descargar por aquí.
Pasos solo para Node

Recuerda que cuando tenemos este archivo en node es otra vez un proyecto en node por lo tanto aquí tuviéramos que instalar dependencias voy a venir aquí a la parte de mi visual Studio code por acá arrastro este archivo y aquí tenemos las dependencias que tenemos que instalar bueno by Ya lo tenemos Así que vamos listos y CKEditor que sería lo que nos falta entonces aquí tenemos que colocar el 

npm install ckeditor 

Configurar en Laravel

Por defecto, al estar empleando Tailwind, no veremos un siglo aplicado para los H1, HX o listados, mas adelante configuraremos algo para esto.

Vamos a ver los pasos para integrar CKEditor en este caso empleando la solución mediante node entonces recordemos que quedamos acá con la descarga de CKEditor Y recuerda que esto es un proyecto en node porque tenemos aquí el package json y el resto no me importa mucho lo que es el y todo lo demás aunque también lo puedes echar un ojo entonces recordemos que estamos empleando aquí un proyecto en laravel Livewire estos mismos pasos los puedes utilizar si tienes un proyecto en Laravel básico es decir sin Livewire e inertia o cualquier cosa que enten por ahí qué es lo que vamos a hacer por aquí en resources voy a crear una nueva carpeta que va a ser js aquí puedes tener esto por cierto aunque no hace falta pero ahorita vamos a instalar algo js para manejar los js creo que es bastante obvio y aquí voy a arrastrar este llamado main.js por acá que:

***
	Undo
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';

Esto es algo que también debería estar aquí presente y bueno no tiene nada de esto qué desgracia bueno por aquí tenemos que indicar el archivo que acabamos de definir curiosamente no sé por qué no tengo el js Aquí me quedé un poquito extraño porque aquí lo está referenciando pero en fin no sé qué pasó por aquí coloco el c editor que es el archivo que creamos antes pendiente que tenga el mismo nombre por favor si no esto fallaría supongo Esto es lo siguiente que tienes que hacer ya que necesitas indicarle a bite que es el que está compilando o interpretando todo esto qué archivos tiene que interpretar o manejar que en este caso es este que agregamos ahorita ya que esto es otra vez node Entonces ese es el primer paso siguiente paso instalar algo que es ese algo también debería aparecer por acá si venimos aquí Debería darte esto el npm install ckeditor5 si no te lo da de igual manera bueno es esto así que venimos acá y escribimos npm instal o simplemente i c edito en su versión 5 esperamos aquí 10,000 años a que termine y esto sería prácticamente todo por acá mientras esto va instalando ya que aquí lo configuramos o Bueno recuerda que esto está ampliando la dependencia de CKEditor que la acabamos de instalar Entonces sería simplemente ahora importar ese secadito que tenemos por aquí desde el archivo en el cual lo queramos emplear entonces voy a cerrar todo esto Dios mío Cuánta cosa tengo aquí abierta iremos aquí al de saave de los post que es donde lo queremos utilizar creo que nos faltó el ccs pero ahorita vamos para allá ya que se no se va a ver todo roto importantísimo.

Una vez instalado tenemos que es este que tenemos acá que es el que te mostraba todo esto es importante porque es imprescindible que entiendas esto estos pasos son como quien dicen básicos en cualquier plugin que tú quieras instalar básicamente Lo bueno es que aquí ya tenemos todo configurado esto realmente lo tuvieramos que escribir de manera manual pero como puedes ver es bastante largo bastante propenso a errores y al menos que sea un ingeniero en CKEditor es ser alguien que solamente trabaja en CKEditor podemos aprovechar ya una solución tal cual la tenemos aquí Qué es lo bonito de sec editor ya tenemos todo esto preconfigurado entonces simplemente lo tenemos que utilizar y si quieres cambiar algo Bienvenido sea pero no haría falta para lo que es el alcance de este curso Bueno finalmente por aquí tenemos que importar nuestro CKEDITOR para eso aquí al final de todo también lo pudieras importar en el layout pero como solamente lo quiero emplear en una parte en particular no tiene mucho sentido que lo cargues a lo largo de toda la aplicación Entonces lo podemos cargar en donde lo vayamos a utilizar por aquí voy a colocar el array ya que más adelante falta el ccs y colocamos la ubicación del caditor y estamos antes podemos copiar aquí la URL relativa la colocamos acá pendiente aquí con los Slash Ya que en Windows creo que lo invierte y esto sería todo por acá Aquí guardamos Y fíjate que bueno en principio funciona correctamente:

import { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo , Heading} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
export default {
  components: {
    ***
    ClassicEditor
  },
  data() {
    return {
        editor: ClassicEditor,
        editorConfig: {
            plugins: [Bold, Essentials, Italic, Mention, Paragraph, Undo, Heading ,],
            toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'heading',],
        }
    };
},
}

Creamos una etiqueta para el CKEditor:

<div id="ckcontent">{!! $text !!}</div>

Finalmente, vemos que el el h2 y es porque no hemos cargado el el ccs específico para sec editor pero es por más que ha aquí puedes ver el Fuente Fíjate que esto realmente es un h1 y aquí va variando Eso es lo importante más que si se interpreta aquí el css correctamente o no esos detallitos lo vamos viendo poco a poco pero otra vez Lo importante es que tengas esto y aquí no tengas ningún error a sección de esto En caso de que por alguna cuestión se haya eliminado este archivo.

17-10-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Laravel Livewire - Instalar y Configuración Inicial de CKEditor NPM