我已经使用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/