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 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.
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
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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter
Acepto recibir anuncios de interes sobre este Blog.
!Cursos desde!
10$
En Udemy
Quedan 3d 23:18!
!Cursos desde!
4$
En Academia
Ver los cursos!Libros desde!
1$
Ver los libros