TinyMCE拖放圖片上傳問題

我已經使用了TinyMCE一段時間，但現在想要實現拖放圖片上傳功能。（例如，您可以從本地計算機拖動圖像到文本編輯器中，調整其重新定位等等，然後將其上傳到服務器）我將爲此功能購買Redactor，但後來我注意到TinyMCE的paste_data_images選項允許圖像被直接拖入/粘貼到編輯器中。這似乎將其轉換爲內聯base64編碼數據。TinyMCE拖放圖片上傳問題

我懷疑並已經讀過，理論上可能會將此值提交給服務器，從Dom中提取base64 uris，將它們寫入文件，將SRC替換爲新創建的路徑文件，然後將文本提交到數據庫。有沒有人做到這一點？

從我最初的探索，我發現問題可能是：

巨大的圖像（〜100MB）可能被粘貼到這可能會導致問題的文本框中。
Internet Explorer 11和Edge瀏覽器都不是似乎允許拖放圖像到文本框中。

有沒有人設法讓這項工作看起來不錯？

我已經重新檢查了Redactor並注意到它也無法與IE和Edge一起使用。

來源

2016-04-26 Manachi

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處的圖像處理程序必須執行任何需要將圖像「存儲」到應用程序中的操作。這可能意味着是這樣的：一個文件夾中

存儲項Web服務器
存儲該項目上的數據庫中
存放在資產管理系統

的項目.. 。無論您選擇存儲圖像的位置，您的圖像處理程序需要返回一行JSON，以告知TinyMCE圖像的新位置。如TinyMCE文檔中所提到的，這可能如下所示：

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

TinyMCE會將圖像的src屬性更新爲您返回的值。如果您在init中使用images_upload_base_path setting，那麼它將被預置到返回的位置。

這裏的網絡是TinyMCE知道什麼時候嵌入的圖像存在於你的內容中，但它不可能知道在你的應用程序的上下文中如何處理該圖像，以便作業（「圖像處理程序」）是某種東西你必須創建。

至於你引用的問題...

如果瀏覽器不允許拖/放順序，你可以看看使用像MoxieManager或elFinder等文件管理器，允許你上傳通過用戶界面顯示圖像，並將上傳的圖像一步顯示在您的內容中。
圖像大小總是一個問題。您可以在圖像上傳處理程序中的服務器上管理它，並在圖像「太大」時返回錯誤。如果圖像太大，您也可以編寫自己的圖像處理函數並完全停止上傳。

來源

2016-04-26 14:10:56

謝謝 - 這是一個美妙的答案，正是我所追求的。不幸的是，感謝微軟瀏覽器（似曾相識），文件管理器是必須的嗎？否則，IE/Edge用戶可能無法上傳圖像。我看到還有一個名爲「Responsive Filemanager」的第三方瀏覽器也可以完成這項工作。 – Manachi

如問題所述，Internet Explorer 11和Edge瀏覽器似乎都不允許將圖像拖入文本框。相反，圖像似乎取代了整個頁面（即它瀏覽到圖像位置）。這是一個已知的問題？如果是的話，是否有任何微軟的認可？這是故意的嗎？還是會修復一個錯誤？ – Manachi

TinyMCE拖放圖片上傳問題

回答

相關問題