TinyMCE 拖放图片上传问题
TinyMCE Drag and Drop image upload issues
我使用TinyMCE 有一段时间了，但现在想实现拖放图片上传功能。 （即您可以将本地计算机中的图像拖到文本编辑器中，调整大小和重新定位等，然后将其上传到服务器）我打算为此功能购买 Redactor，但后来我注意到 TinyMCE 有 paste_data_images 选项允许图像 dragged/pasted 直接进入编辑器。这似乎将其转换为内联 base64 编码数据。
我怀疑并已阅读，理论上可以将此值提交给服务器，从 Dom 中提取 base64 uris，将它们写入文件，将 SRC 替换为新创建文件的路径，然后将文本提交到数据库。有人做到了吗？
根据我最初的探索，我发现问题可能是：
- 巨大的图像 (~100mb) 可能会被粘贴到文本框中，这可能会导致问题。
- Internet Explorer 11 和 Edge 浏览器都没有
似乎完全允许将图像拖动到文本框中。
有没有人设法使它无缝运行？
此后我仔细检查了 Redactor，发现它也不适用于 IE 和 Edge。
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 处的图像处理程序必须对应用程序中的图像 "store" 做任何需要做的事情。这可能意味着：
- 将项目存储在网络服务器上的文件夹中
- 将项目存储在数据库中
- 将项目存储在资产管理系统中
...无论您选择将图像存储在何处，您的图像处理程序都需要 return 一行 JSON 告诉 TinyMCE 图像的新位置。正如 TinyMCE 文档中所引用的，这可能看起来像：
{ location : '/uploaded/image/path/image.png' }
TinyMCE 随后会将图像的 src 属性更新为您 return 的值。如果您在 init 中使用 images_upload_base_path setting，它将被添加到 returned 位置。
这里的网络是 TinyMCE 知道您的内容中何时存在嵌入的图像，但它不可能知道在您的应用程序上下文中如何处理该图像以便完成工作（"image handler"）是你必须创造的东西。
关于您提到的问题...
- 如果浏览器不允许 drag/drop 序列，您可以考虑使用 MoxieManager 或 elFinder 等文件管理器。它们允许您通过 UI 上传图像并上传图像一步出现在您的内容中。
- 图像大小始终是个问题。您可以在服务器上的图像上传处理程序中管理它，如果图像是 "too large"，则 return 会出错。您也可以编写自己的图像处理函数，如果图像太大则完全停止上传。
我使用TinyMCE 有一段时间了，但现在想实现拖放图片上传功能。 （即您可以将本地计算机中的图像拖到文本编辑器中，调整大小和重新定位等，然后将其上传到服务器）我打算为此功能购买 Redactor，但后来我注意到 TinyMCE 有 paste_data_images 选项允许图像 dragged/pasted 直接进入编辑器。这似乎将其转换为内联 base64 编码数据。
我怀疑并已阅读，理论上可以将此值提交给服务器，从 Dom 中提取 base64 uris，将它们写入文件，将 SRC 替换为新创建文件的路径，然后将文本提交到数据库。有人做到了吗？
根据我最初的探索，我发现问题可能是：
- 巨大的图像 (~100mb) 可能会被粘贴到文本框中，这可能会导致问题。
- Internet Explorer 11 和 Edge 浏览器都没有 似乎完全允许将图像拖动到文本框中。
有没有人设法使它无缝运行？
此后我仔细检查了 Redactor，发现它也不适用于 IE 和 Edge。
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 处的图像处理程序必须对应用程序中的图像 "store" 做任何需要做的事情。这可能意味着：
- 将项目存储在网络服务器上的文件夹中
- 将项目存储在数据库中
- 将项目存储在资产管理系统中
...无论您选择将图像存储在何处，您的图像处理程序都需要 return 一行 JSON 告诉 TinyMCE 图像的新位置。正如 TinyMCE 文档中所引用的，这可能看起来像：
{ location : '/uploaded/image/path/image.png' }
TinyMCE 随后会将图像的 src 属性更新为您 return 的值。如果您在 init 中使用 images_upload_base_path setting，它将被添加到 returned 位置。
这里的网络是 TinyMCE 知道您的内容中何时存在嵌入的图像，但它不可能知道在您的应用程序上下文中如何处理该图像以便完成工作（"image handler"）是你必须创造的东西。
关于您提到的问题...
- 如果浏览器不允许 drag/drop 序列，您可以考虑使用 MoxieManager 或 elFinder 等文件管理器。它们允许您通过 UI 上传图像并上传图像一步出现在您的内容中。
- 图像大小始终是个问题。您可以在服务器上的图像上传处理程序中管理它，如果图像是 "too large"，则 return 会出错。您也可以编写自己的图像处理函数，如果图像太大则完全停止上传。