Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

216
Vistas
TinyMCE detect remote image dragged-in or uploaded

As documented, TinyMCE allows uploading images automatically: one defines an endpoint (images_upload_url), which is expected to upload the image and return the location for TinyMCE to use in markup.

However, when pasting, dragging or inserting an image from a URL — for example, https://somecdn.com/image.png — TinyMCE will simply embed the image tag with the somecdn.com source, instead of sending the URL to images_upload_url to be uploaded.

I've scoured through the docs here and haven't found any way to configure TinyMCE to do this. Is there a method I can override in order to upload images from URLs as well as local image uploads?

Summary

To clarify:

  • Current behavior with local image dragged in: TinyMCE sends the image to the URL specified in images_upload_url, then embeds the source returned.
  • Current behavior with remote image dragged in: TinyMCE embeds the remote image, sourced with its remote URL.
  • Desired behavior with remote image dragged in, similar to well established products like Microsoft's GroupMe: TinyMCE sends the image URL to the URL specified in images_upload_url, then embeds the source returned. I can figure out how to upload the URL & manually embed the image in TinyMCE, but I need to know what event to intercept to get the dragged-in image URL!
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

What you are wanting to do is not technically possible for a great many "remote" images as most sites won't have the appropriate CORS headers in place to allow for what you want to happen. You can fetch/proxy the image via some server side code and then do whatever you want with it once it is fetched server side.

All that being said you also enter a slippery slope of "taking" someone else's intellectual property and storing/serving it from your server which in many cases would be against copyright laws.

EDIT (based on your comments):

The images_upload_url feature is not designed to do what you want it to do. It is not that you cannot do what you are describing but images_upload_url won't do that for you. You can try to use some of TinyMCE's events to capture content insertion and trigger that sort of behavior or you could simply wait for the content to be saved to the server and perform that processing when the content is prepared for saving to your data store.

There are a whole host of events that TinyMCE provides along with some of the standard browser events:

https://www.tiny.cloud/docs/advanced/events/#handlingeditorevents

about 4 years ago · Juan Pablo Isaza Denunciar

0

With some tinkering, I was able to figure out how to handle remote images in TinyMCE!

As I'm using TinyMCE with React, I added an onDrop event:

<Editor
    onDrop={onDrop}

And here is my method implementation, with comments:

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;
}, []);

The implementation seems to work pretty well! When local images are dropped in, they're processed by the default handler; otherwise the onDrop method uploads the images & inserts a tag with their location. Note that filesAPI in this context is just my app's wrapper around an axios fetch call.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda