Configurar CKEditor Editor WYSIWYG en Laravel Inertia con Vue
Extender una aplicación con extensiones y plugins existentes, es una tarea cotidiana, así que, como se mostró en el anterior capítulo, que instalamos y configuramos Oruga UI en el proyecto, vamos a usar otro plugin en el proyecto de Laravel Inertia; en este caso, el de CKEditor para el contenido enriquecido de los posts.
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.
Vamos a usar la integración nativa de CKEditor para Vue 3, la cual requiere, instalar dos paquetes, el CKEditor de Node, y la extensión para Vue:
$ npm install ckeditor5 @ckeditor/ckeditor5-vue
En la documentación oficial:
https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/vuejs-v3.html
Puedes ver que también utilizan otro:
$ npm install ckeditor5-premium-features
Pero es de pago:
https://ckeditor.com/docs/trial/latest/guides/overview.html
Ahora, se configura a nivel del proyecto en Vue, al igual que el resto de los plugins:
resources/js/app.js
import { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
***
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(CkeditorPlugin)
.use(ZiggyVue, Ziggy)
.use(Oruga)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
Y finalmente, ya estamos listos para usarlo; para ello, vamos a abrir el archivo de:
resources/js/Pages/Dashboard/Post/Save.vue:
<div class="col-span-6">
<!-- <textarea
class="rounded-md w-full border-gray-300"
v-model="form.text"></textarea> -->
<ckeditor v-model="form.text" :editor="editor" :config="editorConfig" />
</div>
***
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',],
}
};
},
}
Se importa recursos como el CSS y la funcionalidad del plugin; puedes colocar más opciones en el toolbar cómo puedes consultar en la documentación oficial en el apartado de código fuente:
https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html
En la cual, es una pareja entre el plugin y toolbar; por ejemplo, el de heading:
plugins: [*** Heading ],
toolbar: [*** 'heading'],
Luego, debemos de crear las configuraciones; CKEditor es un plugin con una enorme cantidad de personalizaciones; en el libro, usamos la personalización mínima.
https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v3.html
Y tenemos:
Importante notar:
Al estar usando Tailwind en la aplicación, perdemos es estilo aplicado por defecto, como los tamaños de los títulos, listados, etc, por lo tanto, para recuperar este estilo, definimos un CSS como el siguiente:
resources/css/app.css
/* CKEDITOR */
.ck-editor__editable_inline {
min-height: 400px;
}
.ck-editor__main h1 {
font-size: 40px;
}
.ck-editor__main h2 {
font-size: 30px;
}
.ck-editor__main h3 {
font-size: 25px;
}
.ck-editor__main h4 {
font-size: 20px;
}
.ck-editor__main ul {
list-style-type: circle;
margin: 10px;
padding: 10px;
}
.ck-editor__main ol {
list-style-type: decimal;
margin: 10px;
padding: 10px;
}
/* CKEDITOR */
El cual puedes personalizar a gusto.
Puedes consultar el código fuente en:
https://github.com/libredesarrollo/curso-libro-laravel-10-inertia-store/releases/tag/v0.5
El siguiente punto que vamos a trabajar Es sobre cómo integrar este tipo de plugins en nuestra aplicación en este caso es algo más que todo basado en View porque del lado del servidor no vamos a hacer absolutamente nada Es decir vamos a emplear la capa de inertia con Vue, En caso de que no conozcas qué es lo que es editor es simplemente un plugin de tipo Why see what you get es decir lo que ves es lo que obtienes eso son las siglas que tenemos aquí puedes entrar aquí en la página oficial y ya por aquí empezar a ver un poquito qué es lo que tenemos tiene una parte de pago pero también tiene una parte libre tiene varios formatos aquí puedes darle creo que era que me parece puedes ver que se encuentra disponible múltiples tecnologías incluyendo aquí larabel y la que nos interesa ahorita que sería vue 3 por la capa integración con laracel y en ejemplos puedes encontrar varios diseños Ya que él tiene una especie de wrapper o envoltorio en la cual puedes variar el diseño Este es el que yo siempre utilizo el de Classic pero existen otros tal cual puedes ver en este caso Este es el línea eh Bueno este llamado bon entre otros que puedes ver por acá es un plugin con mucho tiempo en el mercado me parece bastante robusto bastante bueno no he tenido ningún problema con ellos tengo mucho tiempo utilizándolo y es por eso que otra vez vamos a emplearla aquí en esta aplicación o en este curso como elemento necesario en este caso para escribir contenido enriquecido qué es lo que queremos justamente para el texto es decir esto en pocas palabras este tipo de plugin que existen muchos viene siendo una especie de Word Pero para lo que sería el html o para nuestra aplicación web del ladoe el cliente otra vez existen muchos puedes colocar aquí what you see what you get que eran las siglas que te comentaba al inicio y colocas ahí View o directamente en javascript y vas a ver que existen muchos en el mercado pero otra vez yo empleo este Por las razones que te comentaba antes entonces también Tenemos uno para Vue entonces para que uno se ubique un poco pudiéramos colocar aquí sec editor Vue y entrar aquí en la primera página que tenemos acá aquí variaron un poquito las instalaciones ya que yo las tengo un poco distintas qué es lo que Estamos instalando aquí lo que sería el complemento para View bueno lo primero sería el de que no lo coloco aquí pero ya se instalaría como una dependencia o debería instalarse como una dependencia Qué sería el sec editor es decir el plugin en Sí luego sería la extensión par Vue:
Como te digo es algo bastante modular y es por eso que me gusta este paquete para mí es relativamente nuevo no sé cuánto tiempo tiene aquí pero mínimo año y medio una cuestión así pero me parece que es de pago y ya con el nombre bueno no me cuadra mucho dice que tiene una versión triar cuando me puse a buscar un poco más de información sobre el paquete y obviamente aquí estamos utilizando todo que sea 100% libre de pago entonces bueno no lo voy a instalar por acá lo que podríamos instalar sería como te digo el sabor por decirlo de alguna manera que es lo que veíamos por aquí para ver esto que tenemos aquí yo como te digo siempre instalo el Classic Aunque puedes probar instalar otro Aunque al menos para esta sección si no lo dominas mucho Te recomendaría que instales lo mismo que yo para que no tengas ningún problema Entonces es por eso que por aquí ves que yo también instalo el cadit 5 B Classic que sería otra vez la versión clásica del mismo nuevamente aquí no haría falta instalar el sec editor a secas como muestra acá porque debería instalarse como una dependencia entonces aclarado esto un poquito podemos instalarlo para ver qué pasa voy a copiar esto voy a volver acá voy a detener la aplicación y voy a colocarlo aparte de este como te indica vamos a instalar el de la versión de class editor entonces para eso aquí colocamos o podemos venir aquí rapidito para no equivocarnos Class editor por aquí debería de aparecer el npm no me parece que no ckeditor Classic npm instal a ver qué Parece esperamos 100000 años sería este bueno para que no te equivoques lo voy a copiar voy a venir aquí y solamente coloco el el nombre del paquete que sería @ ckeditor:
Esto debería de ser todo voy a darle aquí un enter y esperamos lo mejor ya por aquí se instaló exitosamente así que ya lo pudiéramos emplear cómo lo empleamos como te digo en este punto tenemos el conector para Vue y también en lo que es el núcleo de sec editor para poder emplear una interfaz como la que tenemos aquí esto que tenemos aquí esto también es completamente personalizable ya yo no voy a entrar por bueno cuestiones de tiempo y tampoco quiero como quien dice hacer un curso específico editor Esto lo puedes personalizar bastantísimo con plugins que puedes instalar de manera opcional y también con configuraciones que puedes realizar otra vez yo voy a ir haciendo un ejemplo básico de esto entonces el siguiente punto es configurar sec editor en nuestra aplicación en View por lo comentado antes porque definimos una extensión para View entonces para eso aquí tenemos el deuse caditor tal cual puedes ver aquí el paquete que importamos bueno que instalamos antes así que abrimos aquí el de control js voy a bajar esto un poquito aquí podemos ejecutar de igual manera:
Y debería de funcionar todo correctamente puedes ver que no tuve ningún problema voy a bajar un poquito e importamos en alguna parte Ahora aquí colocamos import sec editor Ah mira ya lo encontró bueno excelente entonces voy a colocarle aquí esto es me parece que es una importación sin sin nombre al menos así la tenía Así que voy a quitarle esto y voy a renombrar un poquito ck editor lo prefiero así y lo colocamos acá guardamos y vemos que pasa por acá Bueno voy a levantarlo otra vez porque creo que no hio nada perfecto no creo que que tengamos problemas ahí lo tenemos y ya con esto lo pudiéramos emplear cómo lo podemos emplear es bastante sencillo esto también lo puedes ver en la documentación oficial pero aquí yo lo tengo todo más cerrado vamos a ir al componente en donde lo lo queramos emplear importamos como quien dice sabor creo que está bien dicho y ahora tenemos aquí un componente llamado caditor que lo pudiéramos emplear gracias a la importación que hicimos ahorita o al que hicimos ahorita por aquí creamos el editor Bueno aquí creo que podemos agarrarnos uno de estos editor ahorita probamos y lo configuramos acá y el BM también por lo tanto eso sería todo muy sencillo ya con esto no requeríamos del de arriba aunque también lo puedes dejar ahí si tú quieres Entonces vamos a venir acá y vamos a hacer el proceso voy a bajar aquí un poquito vamos a venir aquí a la parte de bueno primero importación para importar el paquete voy a colocarlo por aquí arriba con los paquetes colocamos
Sería Este me parece que Manía con los las llaves para ver Classic editor c editor es el que tengo aquí perfecto Que bueno que me funcione el autocompletado no instalé nada por que se lo pregunte Debería ser algo de Solo que a veces lo hace a veces no entonces Entonces es cuestión de suerte y lo importo por acá como uno de los componentes ahora vamos a ir a la parte de Data que no la tengo porque la tengo que definir voy a abrir aquí el de Data creo que es este Ahí está coloco editor dos puntos voy a colocarlo como lo coloco ahorita en el libro y ahorita hago algunas pruebas Editor y aquí coloco el de en esto Classic editor el paquete que importamos hace unos momentos aquí Me faltó para ver est porque está en rojo creo que siempre estado bueno venimos acá a ver no s ha algo que reventó por ahí vamos a ver okay tenemos algún problema con alguna dependencia Creo que ahora sí es una importación con nombre aquí lo que le está indicando es que ya no provee una exportación por defecto Entonces sería ya por nombre voy a chequear la documentación oficial y ahí reviso bueno revisando aquí ahora Así es la importación Esta es la documentación oficial estas son cosas que siempre cambian entonces coloco qui en llave aquí también dice que es simplemente CKEditor Bueno a mí me gusta forzar las cosas entonces no sé si pueda colocarle completa okay Okay esta en el app. Fíjate que si tenemos un problema Entonces se lo coloco con nombre voy a quitarlo CKEditor es el que voy a definir acá a ver si lo toma así y ahí lo tomó entonces cambiaron unas cositas ahí con las importaciones eso sucede bien No hemos hecho nada todavía no hemos configurado el plugin Así que vamos allá a ver que nos espera el destino ya en este punto deberíamos de poder emplear el componente que te indicaba antes de CKEditor voy a subir hasta acá ver dnde está el de mesas digo el de text que definimos no lo veo Aquí está sería comentar esto control K Baja un poquito y definimos ahora el que te comentaba c editor Bueno este ya no funciona el autocompletado ahí lo cerramos y aquí colocamos Editor que sea igual a editor punto editor que fue lo que definimos editor en el Data y le colocamos aquí el bodel que sería el mismo de arriba model que es donde va obviamente a colocar el contenido formulario Tex esperamos aquí para ver no veo que ha nada como que cambiado otra cosita por ahí aquí también lo indica no resolvió el componente Voy a instalar este paquete también porque Puede que no haya instalado algo por ahí aquí instalé bueno Como vistes antes el de class ditro y toda la cuestión Esto fue lo que instala
Entonces puede que requiera algo adicional ahí ya que esto Este ejemplo en cierta parte está la documentación oficial por aquí lo puedes ver claro está es un poquito lo que intento hacer y aquí está el componente y aquí está lo que está importando le importa algunos materiales adicionales como te digo lo puedes personalizar Aquí tienes un ejemplo pero el componente debería existir con definirlo acá entonces ejecutamos y No todavía no bueno cambiaron muchas cosas realmente es lo que ya da la documentación oficial ya te muestro un poquito aquí configuré la las opciones de manera manual si se las quito de igual manera voy a hacer estas pruebas para que veas qué es lo que sucede aparece así como un bloque muerto antes sí aparecían algunas por defecto qué raro creo que esto es reciente porque yo configuré uno hace unos meses en fin esto lo tenemos que configurar de manera manual para que las opciones las que habías antes aquí tal cual teníamos y el editor entonces si te muestra un poco el código las importaciones también las cambié porque si no dan errores con las que mostraba antes voy a bajar un poco no es caditor aas no es sec aditor @ no es caditor CKEditor 5000 Classic sino directamente esto aquí tenemos el Classic y también los paquetes que queremos importar aquí tenemos más puedes ir viéndolos y puedes ir importándole más entonces entonces aquí están los paquetes esto otra vez lo puedes ver en la documentación oficial colocas acá editor vue 3 y ahí vas a tener otra vez la documentación oficial El ccs también es necesario porque si no aparece eh de esta forma bastante rota cosa que no queremos entonces Que aparezca con un diseño bonito y aquí las importaciones indicamos:
Cuál es el sabor por decir así decirlo del secador que vamos a emplear y por aquí un un texto que le dejamos ahí de ejemplo que no es necesario y no aparece porque este sería el de editar si voy aquí al de crear le baja un poquito el zoom también voy a venir aquí al de crear rapidito post create Bueno aquí debería aparecer ese texto pero tampoco me preocupa porque bueno no me interesa pero ni siquiera funciona entonces creo que ahí tienen un problema en la documentación oficial en fin aquí los plugins como te indicaba y aquí cómo quieres Mostrar las opciones en el tobar que si un dor redo negritas yalit que son las opciones que puedes ver que tenemos aquí tal cual puedes ver entonces es básicamente eso Entonces si quieres más opciones aquí por ejemplo agregué la de párrafo Te tendrías que ir aquí a este esta otra página que tenemos acá voy a darle aquí atrás que ronda te mostraba los Sabores y aquí fíjate que tenemos esta opción aquí puedes darle de código fuente para que veas cómo se coloca todo esto la parte de la imagen es un poco laboriosa porque tampoco lo voy a tratar en este curso porque ahí tienes que hacer un lo tiene que recibir del lado donde el servidor Entonces tienes que hacer un desarrollo adicional bien vienes aquí a donde dice Index js y aquí puedes ver todas las cabeceras que puedes importar Aquí es importante que puede que no entiendas eso o no lo haya aclarado mejor dicho es que aparte de importar aquí el paquete que es lo que estamos haciendo también lo tienes que definir aquí en la cabecera y viceversa si lo defines en la cabecera lo tienes que importar ya que si por ejemplo aquí el de aquí coloqué el de quito este y creo que el de párrafo también bu voy a dejarlo así A ver Mira que no aparece el de hiding Aunque lo tenga aquí definido si lo importo Entonces ya sabes qué demonios es y aquí lo puedes ver es cuestión de ir viendo qué es lo que tienes que importar en base a las al nombrado que tiene el plugin es un poquito como quien dice forzado algunas cosas pero cuando más o menos lo dominas creo que puede gustar bastante porque es muy muy personalizable como has podido ver pero si tiene sus mañas sobre todo aquí que le encanta cambiar las importaciones y demás Y también si lo quitas de acá Entonces no aparece entonces tanto la importación de los plugins como lo que colocas aquí en el tbar tiene que ir de la mano para que todo funcione correctamente así que pues es eso como te digo sigue un poquito El ejemplo oficial ya yo voy a actualizar también el libro que desgracia así que pues nada sin más que decir vamos a la siguiente clase.