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?
To clarify:
images_upload_url, then embeds the source returned.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!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
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.