Integrar CKEditor en Laravel Inertia con Vue

Plugins como CKEditor que sirven para poder usar contenido enriquesido en nuestras aplicaciones, y con esto, nos referimos a usar estilos como hacemos en Open Office, Google Docs, o Microsoft Office, por nombrar algunos, en nuestra página web, estos plugins hay muchisimos y hay para todos los gustos, pero, hay uno que se ha mantenido en el tiempo y ofrece una excelente calidad, eficiente, y muy personalizable, y esto no es otro que CKEditor y vamos a conocer como podemos integrarlo en un proyecto en Laravel, especificamente en Laravel con el scaffolding de Inertia.

Laravel Inertia, al usar Vue como vista del lado del cliente, tenemos que usar la integración con Vue, y esta es una de las ventajas enormes que tiene CKEditor, y es que esta disponible para una gran cantidad de tecnologías de JavaScript como React, Angular, Wordpress, etc, en el caso de Inertia con Vue, necesitamos instalar dos paquetes, el CKEditor como tal, y el plugin para Vue:

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

CKEditor es un editor de texto como word, pero, para usarlo en nuestras aplicaciones web, por lo tanto, es tecnología HTML y no es más que otro plugin del tipoWYSIWYG que tenemos a nuestra dispocisión, es de código abierto y proporciona un procesador de texto web; es fácil de recomendar, tiene muchisimo tiempo en el mercado y recibe actualizaciones recurrentes, por lo tanto, es un gran cantidado para usar en nuestros proyectos.

CKEditor cuenta con numerosas funcionalidades, como por ejemplo: soporte para tablas, vista previa de imágenes (la parte de configurar las imágenes requieren de configuraciones adicionales tanto a nivel del CKEditor como a nivel del Laravel o el backend que estes usando), así como cualquier otro archivo multimedia, herramientas para dar formato al texto, etc. Por lo tanto, CKEditor es muy útil para crear y editar contenido web con una interfaz fácil de utilizar y sin necesidad de tener conocimientos avanzados de programación. Existen diferentes versiones de CKEditor, como CKEditor 4 y CKEditor 5, cada una con características y funcionalidades propias que puedes usar.

Ahora, se configura a nivel del proyecto en Vue, al igual que el resto de los plugin, agregamos CKEditor en nuestro archivo en Vue:

resources/js/app.js

import CKEditor from '@ckeditor/ckeditor5-vue';
createInertiaApp({
    title: (title) => '${title} - ${appName}',
    resolve: (name) => require('./Pages/${name}.vue'),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(Oruga)
            .use(CKEditor)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

En el ejemplo anterior, se han configurado otros plugins, como Oruga UI, en el cual contamos con varios post que puedes revisar, pero es importante ver es la que es referente a CKEditor.

Y finalmente, ya estamos listos para usarlo; el siguiente script es tomado de mi curso completo sobre Laravel Inertia, y específicamente, tenemos un campo textarea en el cual lo convertimos a WYSIWYG mediante Ckeditor, es decir, un contenedor de texto enriquecido:

resources/js/Pages/Dashboard/Post/Save.vue

<div class="col-span-6">
    <jet-label value="Text" />
     <!-- <textarea
         class="rounded-md w-full border-gray-300"
         v-model="form.text"></textarea> -->
   <ckeditor :editor="editor.editor" v-model="form.text"></ckeditor>
   <jet-input-error :message="errors.text" />
</div>
***
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
export default {
  components: {
    ***
    ClassicEditor
  },
  data() {
    return {
      editor: {
        editor: ClassicEditor
      }
    }
  },
}

Es importante notar que la importación del plugin Classic Editor que es CKEditor:

import ClassicEditor from "@ckeditor/ckeditor5-build-classic"

Creamos un componente, e indicamos el v-model:

<ckeditor v-model="form.text"></ckeditor>

Además de, indicar las configuraciones básicas usando la opción de editor:

<ckeditor :editor="editor.editor" v-model="form.text"></ckeditor>

Con estos sencillos pasos, tenemos el siguiente resultado:

Como puedes darte cuenta, su integración no varia demasiado a lo que ya manejamos con Vue, al asociar un v-model, vamos a recibir en el servidor todo el código HTML generado a través de nuestro CKEditor, listo para guardar en la base de datos o realizar cualquier otra operación que consideres, este es uno de los muchos temas que tratamos en el curso completo con Laravel Inertia.