javascript - TinyMCE 拖放图像上传问题

标签 javascript file-upload drag-and-drop tinymce redactor

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

我怀疑并读过,理论上可以将此值提交到服务器,从Dom中提取base64 uri,将它们写入文件,用新创建文件的路径替换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。它将根据 init 中 images_upload_url 选项的设置将该图像发送到您选择的 URL(通过 HTTP POST)。

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

  • 将项目存储在网络服务器上的文件夹中
  • 将项目存储在数据库中
  • 将项目存储在 Assets 管理系统中

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

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

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

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

至于你提到的问题...

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

关于javascript - TinyMCE 拖放图像上传问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36858541/

相关文章:

javascript - 索引字典的编辑距离

android - 哪种文件上传协议(protocol) (FTP/HTTP) 适用于网络高度不可靠的移动设备

上传两个文件时上传php文件

javascript - 如何使 Canvas 的不同形状可拖动且其特定区域可放置在同一 Canvas 中

javascript - 类似 iPhoneX 通过拖动显示/隐藏菜单/容器

javascript - 使用 JavaScript 突出显示字符串中单词的数据结构

javascript - 多个同名文件未在环回中上传

javascript - 即 10 : dragstart event doesn't get fired if <img> is wrapped by <a>

javascript - 从嵌套响应中获取 json 值

iPhone。如何跟踪 HTTP 上传进度