TinyMCE拖放图像上传问题

Question

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

我怀疑并且已经读过，理论上可以将此值提交给服务器，从Dom中提取base64 uris，将它们写入文件，用新创建的文件的路径替换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_url选项的设置将该图像发送到您选择的URL（通过HTTP POST）。

images_upload_url（你必须创建）中引用的URL处的图像处理程序必须做任何需要做的事情来存储＆＃34;应用程序中的图像。这可能意味着：

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

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

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

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

这里的网络是TinyMCE知道您的内容中何时存在嵌入式图像，但它可能无法知道在您的应用程序上下文中如何处理该图像以便该作业（＆＃34;图像处理程序＆ ＃34;）是你必须创造的东西。

至于你提到的问题......

• 如果浏览器不允许拖放序列，您可以使用MoxieManager或elFinder等文件管理器查看。它们允许您通过UI上传图像，并让上传的图像一步显示在您的内容中。
• 图像尺寸始终是个问题。您可以在图像上载处理程序中的服务器上管理它，如果图像太大而返回错误＆＃34;。如果图像太大，您也可以编写自己的图像处理函数并完全停止上传。