TinyMCE拖放圖像上傳問題

Question

我已經使用TinyMCE了一段時間，但是現在想要實現拖放圖像上傳功能。 （例如，您可以在其中將圖像從本地計算機拖到文本編輯器中，調整其大小並重新放置，然后將其上傳到服務器），我打算為此功能購買Redactor，但隨后我注意到TinyMCE具有paste_data_images選項，將圖像直接拖動/粘貼到編輯器中。 這似乎將其轉換為內聯base64編碼的數據。

我懷疑並且已經讀過，從理論上講，可以將這個值提交到服務器，從Dom中提取base64 uri，將它們寫入文件，將SRC替換為新創建的文件的路徑，然后提交文本到數據庫。 有人做到了嗎？

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

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

有沒有人設法使它正常工作？

從那以后，我仔細檢查了Redactor，發現它也不適用於IE和Edge。

Answer 1

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 ，則該images_upload_base_path setting將位於返回位置之前。

最終的結果是，TinyMCE知道內容中何時存在嵌入式圖像，但是在應用程序的上下文中它可能不知道如何處理該圖像，因此必須創建作業（“圖像處理程序”）。

至於您參考的問題...

• 如果瀏覽器不允許拖放序列，則可以使用文件管理器（例如MoxieManager或elFinder等）查看它們。它們允許您通過UI上傳圖像，並使一步上傳的圖像出現在您的內容中。
• 圖像大小始終是一個問題。 您可以在圖像上傳處理程序中的服務器上對此進行管理，如果圖像“太大”，則返回錯誤。 您也可以編寫自己的圖像處理函數，如果圖像太大，則完全停止上傳。