Javascript TinyMCE拖放图像上载问题

我使用TinyMCE已经有一段时间了，但现在我想实现拖放图像上传功能。（即，您可以将图像从本地计算机拖动到文本编辑器中，调整大小和位置等，然后将其上载到服务器）我本来打算为该功能购买Redactor，但后来我注意到TinyMCE具有“粘贴数据图像”选项，允许将图像直接拖动/粘贴到编辑器中。这似乎将其转换为内联base64编码数据

我怀疑并且已经读到，理论上可能会将此值提交给服务器，从Dom中提取base64 URI，将其写入文件，用新创建文件的路径替换SRC，然后将文本提交给数据库。有人做到了吗

从我最初的探索中，我发现问题可能是：

• 巨大的图像（~100mb）可能会被粘贴到文本框中，这可能会导致问题
• Internet Explorer 11和边缘浏览器都不支持 似乎完全允许将图像拖动到文本框中

有没有人能让这一切顺利进行

---

后来我仔细检查了Redactor，发现它也不能与IE和Edge一起使用。

TinyMCE 4.2+实际上有自己的内置过程来处理您在编辑器中放置的图像上传：

基本过程是TinyMCE将为插入编辑器的每个图像创建单独的HTTP POST。它将根据init中

images\u upload\u URL

选项的设置，将该图像发送到您选择的URL（通过HTTP POST）

images\u upload\u URL

（您必须创建）中引用的URL处的图像处理程序必须执行任何需要执行的操作，以“存储”应用程序中的图像。这可能意味着：

• 将项目存储在web服务器上的文件夹中
• 将项目存储在数据库中
• 将项目存储在资产管理系统中

…无论您选择将图像存储在何处，您的图像处理程序都需要返回一行JSON，告诉TinyMCE图像的新位置。如TinyMCE文档中所述，这可能类似于：

{ location : '/uploaded/image/path/image.png' }

TinyMCE然后将图像的src属性更新为您返回的值。如果您在init中使用

images\u upload\u base\u路径设置

，该设置将被添加到返回的位置

这里的关键是TinyMCE知道嵌入图像何时存在于您的内容中，但它不可能知道在您的应用程序上下文中如何处理该图像，因此作业（“图像处理程序”）是您必须创建的

至于你提到的问题

• 如果浏览器不允许拖放序列，您可以使用文件管理器（如Moxiemager或elFinder等）查看。它们允许您通过UI上载图像，并在一个步骤中将上载的图像显示在内容中
• 图像大小始终是一个问题。您可以在服务器上的图像上载处理程序中对此进行管理，如果图像“太大”，则返回错误。您还可以编写自己的图像处理函数，如果图像太大，则完全停止上载

---

谢谢-这是一个极好的回答，也是我想要的。不幸的是，多亏了微软浏览器（似曾相识），文件管理器真的是必不可少的吗？否则IE/Edge用户可能无法上传图像。我看到还有一种叫做“响应文件管理器”的第三方浏览器也可以完成这项工作。正如问题中提到的，Internet Explorer 11和Edge浏览器似乎都不允许将图像拖动到文本框中。相反，图像似乎取代了整个页面（即浏览到图像位置）。这是一个已知的问题吗？如果是这样的话，微软有没有任何认可？这是故意的吗？还是一个将被修复的bug？