CkEditor, upload: Primeros pasos, CKBox, CKFinder, SimpleUploadAdapter, Adaptador Personalizado - 04

Vamos a hablar sobre las formas que tenemos para cargar imágenes o archivos en CKeditor.

Vamos a tratar ahora el proceso de upload ya que obviamente si intentamos probar.

CKEditor acepta dos formas se pudiera decir una es mediante un botón que debería aparecer por acá o de repente no lo veo y la otra es que es la que siempre empleo y por eso es que estoy perdido un poquito aquí arriba esarrastrando la imagen y por aquí te indicar debería de subir obviamente pero en este caso como todavía no lo tenemos implementado:

ckeditor5.js?v=efbb40b8:9479 filerepository-no-upload-adapter 
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-filerepository-no-upload-adapter

Nos va a dar un bonito error o advertencia en este caso como el siguiente que nos indica clarito de que no hemos definido un adaptador entonces que demonios significa esto en esta clase primero vamos a ver un poco cómo funciona todo esto cómo lo acepta cómo podemos indicar a CKEditor de que queremos subir archivo es decir cómo podemos configurar a CKEditor para que soporte la carga de archivos en este caso imágenes así que bueno para llegar a esta página como dice muy difícil escribimos acá 

CKEditor upload image

Que es lo que usualmente queremos cargar y el primer enlace si no ponte aquí a navegar como un loco pero es un poquito nea la documentación aquí Entonces tenemos varias formas una es pasando por caja y configurando aquí el plugin llamado CKBox o CKFinder, que son plugins muy elaborados.

Simple Adapter o Custom adapter

Quédate con eso otra vez la forma Premium con este par de paquetes y la forma de pobres que es empleando estas dos opciones que es el simple adaptador que ya es un paquete es decir un paquetico:

import {
	ClassicEditor,
	SimpleUploadAdapter,
	***
} from 'ckeditor5';

Así que podemos importar de esta manera ya lo vamos a ver más adelante lo importamos y configuramos algunas cositas y ya y la otra es creando una un adaptador personalizado pero lo importante que notes aquí es el término de adaptador que es l que no está indicando por acá entonces eso es básicamente lo que tenemos que configurar cuál emplear yo yo me iría por este realmente eh luego te voy a hablar un poquito de este ya que esta yo lo empleaba creo que era para CKEditor 3 4 realmente no recuerdo pero al menos sé que en la 5 no lo empleaba y bueno cuando está intentando probar el código que tenía no me funcionaba seguramente era alguna tontería lo tenía que arreglar pero a la final me fui para esta que era más sencilla Pero esto simplemente la vamos a tratar un poco de manera hablada y esta sí la vamos a implementar de igual manera aquí tienes más información Aunque la documentación de sec editor es muy extensa o muy espesa:

https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html

- Andrés Cruz

In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro Laravel 12 con Tailwind Vue 3, introducción a Jetstream Livewire e Inerta desde cero - 2025.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.