【问题标题】:Is there a drag-drop/paste image insertion (upload) plugin or similar for TinyMCE?TinyMCE 是否有拖放/粘贴图像插入(上传)插件或类似插件?
【发布时间】:2012-07-31 20:09:43
【问题描述】:

在 Gmail 中,只需从本地文件浏览器(不是 url)拖放图像或将复制的图像粘贴到其中,即可在新消息/回复窗口中上传内嵌图像。

有没有一种简单的方法可以将此功能添加到 TinyMCE 编辑器?如果没有,有什么想法可以以最好和/或最简单的方式完成吗?

更多信息/需求:

  • 已定义的“拖放区”不可用,因为拖放/粘贴的图像必须准确地出现在用户在 TinyMCE 窗口中拖放/粘贴的位置(即两段文本之间)。
  • 在上传时或上传后处理/调整图像大小,即最大。最好是 500kb。
  • 出于与上述相同的原因 - 并且出于易于使用的原因 - 不应向用户显示任何对话框,就像 Gmail 刚开始上传图片一样,没有任何问题。
  • 任何拖放/粘贴到 TinyMCE 的图像都将使用 Amazon Simple Storage Service (S3) 进行存储。来自 Tiny 的文本将存储在我们的数据库中。可以选择将粘贴的图像存储在数据库中而不是 Amazon S3 中(将 Heroku 与 PostgreSQL 结合使用)。
  • 文本和图像 - 以正确的顺序/上下文 - 应在稍后的计时器再次呈现给用户,因此在拖放/粘贴图像时,或保存 TinyMCE 表单时,占位符或类似的必须将图像信息写入 TinyMCE,以便我们知道将来某个时候需要检索时要在文本中显示哪个图像和位置。
  • 网站使用的是 Rails 3.1.3,即将升级到 3.2。
  • 仅 HTML5 即可,即 HTML4 兼容性并不重要。

非常感谢! :-)

PS。我已经用谷歌搜索了 + 在 SO 上查看了类似的问题,但没有找到正确的解决方案。

【问题讨论】:

    标签: jquery html tinymce


    【解决方案1】:

    我已经使用了很多 plupload,发现它非常有用,适用于 html4,这是浏览器没有 flash 或 silverlight 或 html5 时的要求。你看过了吗?我记得看到 this 关于 Amazon 和 S3。祝你好运!

    【讨论】:

    • 非常感谢 :-) 我会看看它是否可用。
    • 你们在使用 plupload 和 tinymce 方面都取得了成功吗?您是否能够允许将图像拖放到 tinymce 中,然后上传和存储这些图像/文件?
    • 嗨 Manachi,不,我从未尝试过将这两者结合使用,抱歉。
    【解决方案2】:

    你可以试试jQuery File Upload,它有拖放支持。

    您也可以通过25+ jQuery Drag and Drop Plugins(或改编自)25+ jQuery Drag and Drop Plugins。

    希望这会有所帮助。

    【讨论】:

    • 这是您要找的吗?否则让我知道。
    • 谢谢,@blasteralfred。我希望它是开箱即用的东西,即 TinyMCE 的插件。此外,jQuery File Uplaod 确实使用缩略图上传文件,但我想在 TinyMCE 编辑器中显示完整图像(就像将图像拖放到 Gmail 中的邮件正文窗口一样)。
    【解决方案3】:

    好吧,这有点奇怪。就连编辑都用base64编码的技巧:

    <img alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQ..
    

    我猜这没问题,但是查看帖子时有 4-5 张合理大小的照片导致服务器负载跳到疯狂的水平.. http 占用 100% 等.. 如果超过一两个人,它会让我们关闭查看帖子。有趣的是,它们在编辑器中显示得很好——当你保存并发布时,痛苦就来了。不太清楚为什么这会击中 apache 如此难以显示帖子(在编辑器中看起来不错)

    【讨论】:

    • 这个答案是针对我的问题还是另一个问题?你提到了一个“帖子”——我没有提到的东西:)
    • 他指的是在将图像拖放到 TinyMCE 后单击保存/提交时会发生什么。它将图像作为 base64 编码的数据 uri“发布”到服务器,然后您必须以某种方式处理它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多