2012-08-02 119 views
5

在Gmail中,可以通過從本地文件瀏覽器(非url)拖放圖像或將複製的圖像粘貼到其中,從而在新消息/回覆窗口中上傳內嵌圖像。TinyMCE有拖放/粘貼圖片插入(上傳)插件嗎?

是否有一種簡單的方法將此功能添加到TinyMCE編輯器中?如果沒有,對於如何以最好和/或最簡單的方式完成這些任何想法?

另外方式/需求:

  • A中定義的「放置區域」是不可用,因爲丟棄/粘貼的圖像必須在用戶放下兩個段落之間恰好出現/在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。我在Google上搜索了類似的問題,但沒有找到正確的解決方案。

回答

2

我已經使用plupload相當多,發現它非常有用,適用於html4,這是瀏覽器沒有flash或silverlight或html5時的要求。你看過那個嗎?我記得看到有關亞馬遜和S3的this。祝你好運!

+0

非常感謝:-)我會看看它是否可用。 – rassom 2012-08-03 08:21:37

+0

歡迎來到rassom – jjay225 2012-08-03 09:54:36

+0

您是否與pluypload一起成功與tinymce合作?您是否允許拖放圖像進入tinymce,然後上傳並存儲這些圖像/文件? – Manachi 2016-04-26 07:50:00

0

好吧,這有點奇怪。即使編輯使用的伎倆,並使用base64編碼:

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

我的猜測是確定的,但與4-5照片大小合理查看後導致服務器負載跳轉到瘋狂的水平.. HTTP採取100%如果有一兩個以上的人在觀看這個帖子,它會把我們關閉。有趣的是,它們在編輯器中顯示得很好 - 這是您在疼痛點擊時保存併發布的時間。真的不知道爲什麼這個打擊阿帕奇這麼辛苦顯示

+0

這是我的問題或其他問題的答案嗎?你提到了一個「帖子」 - 我沒有提到:) – rassom 2012-08-13 07:12:32

+0

他指的是當你點擊保存/提交拖放圖像到TinyMCE後發生的情況。它將圖像作爲base64編碼的數據uri「發佈」到服務器,然後您必須以某種方式處理它。 – Manachi 2016-04-26 07:54:24

1

您可以嘗試jQuery File Upload已經拖了一滴&支持後(當在編輯器中它看起來罰款)。

你也可以去(或改編)25+ jQuery Drag and Drop Plugins

希望這會有所幫助。

+0

這是你在找什麼?別讓我知道。 – 2012-08-12 13:33:12

+0

謝謝,@blasteralfred。我希望它能夠爲TinyMCE提供即裝即用的插件。此外,jQuery File Uplaod確實會上傳帶有縮略圖的文件,但我想在TinyMCE編輯器中顯示完整圖像(就像將圖像拖放到Gmail中的mailbody窗口時一樣)。 – rassom 2012-08-13 07:15:31