Como está documentado, TinyMCE permite cargar imágenes automáticamente: uno define un punto final ( images_upload_url ), que se espera que cargue la imagen y devuelva la ubicación para que TinyMCE la use en el marcado.
Sin embargo, al pegar, arrastrar o insertar una imagen desde una URL, por ejemplo, https://somecdn.com/image.png , TinyMCE simplemente incrustará la etiqueta de la imagen con la fuente de somecdn.com , en lugar de enviar la URL a images_upload_url para ser cargado
Revisé los documentos aquí y no encontré ninguna forma de configurar TinyMCE para hacer esto. ¿Hay algún método que pueda anular para cargar imágenes desde URL, así como cargas de imágenes locales?
Para aclarar:
images_upload_url y luego incrusta la fuente devuelta.images_upload_url y luego incrusta la fuente devuelta. Puedo descubrir cómo cargar la URL e incrustar manualmente la imagen en TinyMCE, ¡pero necesito saber qué evento interceptar para obtener la URL de la imagen arrastrada!Lo que desea hacer no es técnicamente posible para muchas imágenes "remotas", ya que la mayoría de los sitios no tendrán los encabezados CORS apropiados para permitir que suceda lo que desea. Puede obtener/proxyar la imagen a través de algún código del lado del servidor y luego hacer lo que quiera con ella una vez que se obtiene del lado del servidor.
Dicho todo esto, también ingresa en una pendiente resbaladiza de "tomar" la propiedad intelectual de otra persona y almacenarla/servirla desde su servidor, lo que en muchos casos estaría en contra de las leyes de derechos de autor.
EDITAR (basado en sus comentarios):
La función images_upload_url no está diseñada para hacer lo que usted quiere que haga. No es que no puedas hacer lo que estás describiendo, pero images_upload_url no lo hará por ti. Puede intentar usar algunos de los eventos de TinyMCE para capturar la inserción de contenido y desencadenar ese tipo de comportamiento o simplemente puede esperar a que el contenido se guarde en el servidor y realizar ese procesamiento cuando el contenido esté preparado para guardarse en su almacén de datos.
Hay una gran cantidad de eventos que proporciona TinyMCE junto con algunos de los eventos estándar del navegador:
https://www.tiny.cloud/docs/advanced/events/#handlingeditorevents
¡Con algunos retoques, pude descubrir cómo manejar imágenes remotas en TinyMCE!
Como estoy usando TinyMCE con React, agregué un evento onDrop :
<Editor onDrop={onDrop}Y aquí está la implementación de mi método, con comentarios:
const onDrop = useCallback((e) => { const image_url = e.dataTransfer.getData("URL"); /* If this is a local file, use the default functionality provided using images_upload_url */ if (!image_url) { return; } /* Otherwise, intercept the drop event, get the file URL, send it to the API to be uploaded, then embed in content */ e.preventDefault(); filesAPI .upload({ image_url, }) .then((response) => { const { location } = response.data; editorRef.current.execCommand( "mceInsertContent", false, `<img src='${location}' />` ); }); return false; }, []); ¡La implementación parece funcionar bastante bien! Cuando se colocan imágenes locales, el controlador predeterminado las procesa; de lo contrario, el método onDrop carga las imágenes e inserta una etiqueta con su ubicación. Tenga en cuenta que filesAPI en este contexto es solo el contenedor de mi aplicación en torno a una llamada de búsqueda de axios.