TinyMCE 检测远程图像拖入或上传

Question

如文档所述，TinyMCE 允许自动上传图像：定义一个端点 (images_upload_url)，预计将上传图像和 return TinyMCE 在标记中使用的位置。

但是，当从 URL 粘贴、拖动或插入图像时——例如，https://somecdn.com/image.png——TinyMCE 将简单地将图像标签嵌入到 somecdn.com 源中，而不是将 URL 发送到 images_upload_url 进行上传。

我已经仔细阅读了文档 here，但没有找到任何方法来配置 TinyMCE 来执行此操作。有没有我可以覆盖的方法，以便从 URL 上传图像以及本地图像上传？

总结

澄清一下：

拖入本地图像的当前行为：TinyMCE 将图像发送到 images_upload_url 中指定的 URL，然后嵌入源 returned.
拖入远程图像的当前行为： TinyMCE 嵌入了远程图像，来源是其远程 URL。
拖入远程图像的预期行为，类似于 Microsoft 的 GroupMe 等完善的产品： TinyMCE 发送 图像 URL 到 images_upload_url 中指定的 URL，然后嵌入源 returned。我可以弄清楚如何上传 URL 并在 TinyMCE 中手动嵌入图像，但我需要知道要拦截什么事件才能获得拖入的图像 URL!

Answer 1

对于大量“远程”图像，您想要执行的操作在技术上是不可能的，因为大多数站点都没有合适的 CORS headers 来实现您想要执行的操作。您可以 fetch/proxy 通过一些服务器端代码获取图像，然后在获取服务器端后随心所欲地使用它。

综上所述，您还进入了从您的服务器“获取”他人知识属性和 storing/serving 的滑坡，这在许多情况下会违反版权法。

编辑（根据您的评论）：

images_upload_url 功能并非旨在执行您希望它执行的操作。这并不是说您不能做您所描述的事情，而是 images_upload_url 不会为您做那件事。您可以尝试使用 TinyMCE 的一些事件来捕获内容插入并触发此类行为，或者您可以简单地等待内容保存到服务器并在内容准备好保存到数据存储时执行该处理。

TinyMCE 提供了大量事件以及一些标准浏览器事件：

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

Answer 2

经过一番修修补补，我终于弄明白了如何在 TinyMCE 中处理远程图像！

因为我将 TinyMCE 与 React 一起使用，所以我添加了一个 onDrop 事件：

<Editor
    onDrop={onDrop}

这是我的方法实现，附有评论：

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

实施似乎很有效！当放入本地图像时，它们由默认处理程序处理；否则 onDrop 方法会上传图像并插入带有位置的标签。请注意，在此上下文中，filesAPI 只是我的应用程序对 axios fetch 调用的包装器。

TinyMCE 检测远程图像拖入或上传

TinyMCE detect remote image dragged-in or uploaded

javascript

tinymce

tinymce-5

总结