TinyMCE未更新<img> src成功上傳圖片

Question

我遇到了一個問題，使用TinyMCE在Handling Async Image Upload中使用Servlet作爲後端。

主要有兩大問題：

1. 即使使用paste插件和設置paste_data_images:true後，圖像沒有得到時自動從微軟Word文字一起粘貼，純文本得到了糊和圖像越來越錯過粘貼，而當我單獨粘貼圖像時，它會被粘貼。

2. 粘貼圖像後，TinyMCE的應該上傳到異步和更新<img>的src屬性由json從後臺返回的location財產。

現在的問題在這裏出現，當我獨自一人將圖像粘貼它在後臺被自動上傳和恰當的反應是回來與圖像的location爲JSON，我已經驗證了與瀏覽器控制檯，並通過人工圖片插入選項。但畢竟這<img scr>是空白，圖像變成黑色邊界。

如果有人遇到類似問題，請幫助我，而後端可以是任何事情，因爲我認爲這不是後端問題。

驗證碼：

TinyMCE:

<script type="text/javascript" charset="utf-8"> 
      tinymce.init({ 
       selector: '#description', 
       plugins: "image link imagetools codesample emoticons autoresize textcolor table preview wordcount paste", 
       menubar: 'edit | format | insert | table', 
       toolbar1: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
       toolbar2: 'forecolor backcolor | codesample emoticons', 
       automatic_uploads: true, 
       images_upload_url: 'uploadFile', 
       images_upload_credentials: true, 
       images_upload_base_path: '', 
       paste_data_images: true, 
       file_browser_callback_types: 'image', 
       convert_urls: false, 
       file_browser_callback: function(field_name, url, type, win) { 
        tinymce.activeEditor.windowManager.open({ 
         title: "File Browser", 
         type: "image", 
         url: "uploadFile", 
         width: 550, 
         height: 200 
        }, { 
         oninsert: function(url) { 
          win.document.getElementById(field_name).value = url; 
         } 
        }); 
       } 
      }); 
     </script> 

Back end Response after image upload:

[{ "location": "./uploaded/images/201617175645_blobid0.png" }]

<img> tag after image upload：

<img src="" alt="" data-mce-src="" data-mce-selected="1">

Chrome的控制檯顯示也不例外或警告都同時粘貼圖像或uplooding後。請讓我知道是否有人有任何問題的解決方案或某種方式來獲得其背後的實際原因。讓我知道是否需要上面的更多解釋。

Answer 1

您的問題歸結於從MS Word複製/粘貼內容時放置在剪貼板中的內容。

當您複製/粘貼文本和圖像的組合 Word在剪貼板中放置一個代表複製內容的HTML文檔。在這種情況下，圖像是通過<img>標籤的內容的一部分。這些<img>標籤的src指向硬盤驅動器上臨時目錄中的映像文件。由於JavaScript在瀏覽器中的沙盒化，編輯器實際上無法訪問硬盤驅動器上的這些映像文件。圖像不包含在粘貼的內容中，因爲TinyMCE無法渲染它們或將它們上傳到服務器。

當您僅複製/粘貼圖像時 Word會在剪貼板中放置該圖像的二進制（通常是base64）表示。在這種情況下，TinyMCE可以獲取該二進制表示並將base64編碼圖像插入到內容中，因此您可以獲取該圖像。

至於在TinyMCE的圖片上傳功能...是隻適用於通過類似複製/粘貼和拖/放操作中TinyMCE的最終Base64和BLOB編碼圖像 - 這就是爲什麼它的工作如預期當您僅複製/粘貼圖像時，而不是複製/粘貼帶有文本和圖像的文檔時。

有商業附加在TinyMCE（電源粘貼插件），實際上可以解決周圍的Word文檔您的問題。該插件作爲TinyMCE Enterprise的一部分提供 - TinyMCE是Ephox（TinyMCE所有者）的商業TinyMCE產品。 [充分披露我對以弗斯工作，如果你想擁有從Word文檔圖像獲得注入你可以學到在詳細瞭解此選項的內容：https://www.tinymce.com/pricing/

作爲與圖片src沒有得到您的問題更新中... JSON響應對象應該是一個簡單的JSON對象

{ "location": "./uploaded/images/201617175645_blobid0.png" }

......不是......

[{ "location": "./uploaded/images/201617175645_blobid0.png" }]

當TinyMCE需要一個簡單的JSON對象時，您正在返回一個包含一個JSON對象的數組。