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 11 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.

!Cursos desde!

10$

En Udemy

Quedan 3d 23:18!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!