TinyMCE 拖放图像上传问题

Question

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

我怀疑并且已经阅读过，理论上可以将此值提交到服务器，从Dom中提取base64 uri，将它们写入文件，用新创建文件的路径替换SRC，然后提交文本到数据库。有人实现过这个吗？

根据我最初的探索，我发现问题可能是：

• 巨大的图像（~100mb）可能会被粘贴到文本框中，这可能会导致问题。
• Internet Explorer 11 和 Edge 浏览器似乎根本不允许将图像拖到文本框中。

有没有人设法让这个工作顺利进行？

此后我仔细检查了 Redactor，发现它也不适用于 IE 和 Edge。

Answer 1

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

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

基本过程是 TinyMCE 将为您插入编辑器的每个图像创建一个单独的 HTTP POST。它会根据images_upload_urlinit.conf 中的选项设置将该图像发送到您选择的 URL（通过 HTTP POST）。

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

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

...无论您选择将图像存储在哪里，您的图像处理程序都需要返回一行 JSON，告诉 TinyMCE 图像的新位置。正如 TinyMCE 文档中所引用的，这可能如下所示：

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

然后 TinyMCE 会将图像的 src 属性更新为您返回的值。如果您在 init 中使用 ，images_upload_base_path setting它将被添加到返回的位置之前。

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

至于你提到的问题...

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