CkEditor, upload: SimpleUploadAdapter, Carga de archivos fácil - 08

Ya con nuestro método para la carga de archivos lo siguiente que vamos a hacer sería hacer la implementación en el cliente Así que comencemos aquí importándole esta configuración y colocar un método como el siguiente definimos la URL y en principio sería todo:

const editorConfig = {
	***
	plugins: [
		SimpleUploadAdapter,
		***
	],
	simpleUpload:{
		uploadUrl : '/dashboard/post/upload/ckeditor',	
		headers: {
			'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
		}
	},
	***

Así que regresamos por acá vamos a importarlo en cualquier parte recuerda que es la importación Así que no importa a colocarla por aquí arriba ya que abajo son las opciones simple aquí está un adapter pendiente con el nombre con este nombre lo referenciamos en el apartado de plugins se le encuentro por aquí arriba voy a colocarlo y ya con esto pued podemos utilizar la opción llamada simple luego de todo esto no importa el orden lo importante es que sea luego del plugin todo estos son las opciones tal cual te explicaba antes un poco cuando te comentaba la estructura que tenemos en todo esto así que colocamos simple y aquí definimos por cierto aquí sí creo que hay que colocarle el Slash:

uploadUrl : '/dashboard/post/upload/ckeditor',	

Configurar token CSRF

Si al momento del upload da un error 419, debes de configurar el token

Ya esto es creo que por el token Es verdad eso falta chequeamos aquí el nombre recuerda que aquí tenemos la protección de tipo csrf entonces ahí también la tenemos que configurar para eso vamos a ver si tenemos ya el meta aquí control u control F Aquí está este es el token que le podemos pasar así que simplemente lo tenemos que referenciar y pasárselo vamos para acá y para configurar los hiers bueno Esto va en el heer eers colocamos hiers colocamos aquí el token justamente esto CSRF token:

	simpleUpload:{
		uploadUrl : '/dashboard/post/upload/ckeditor',	
		headers: {
			'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
		}
	},

Este es el token que esta definido en la plantilla maestra:

resources\views\dashboard\master.blade.php

<meta name="csrf-token" content="{{ csrf_token() }}">

Que seleccionamos mediante el querySelector.

Acepto recibir anuncios de interes sobre este Blog.

Vamos a implementar los cambios en el cliente para la carga de archivos empleando CKEditor.

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