1問題

　　基於web的富文字編輯器的功能普遍較弱，而word是公認的宇宙第一好用的檔案編輯器，所以許多人都習慣先在word中編輯，然後再將內容粘到web富文字編輯器中。

　　但是，這種操作有一個問題：圖片帶不過來，無法顯示。如下所示。

　　我找到了一個方法來解決這個問題。

2 測試環境

summernote 0.8.18

office 2013

java 8

jsoup 1.7.2

3 原理

　　當我們按ctrl+c複製word中的圖文內容時，在系統的剪下板中會生成了一個型別為HTML的條目。這個條目的內容類似於:

　　如上圖所示，在執行期間word會將圖片釋放至某個臨時目錄，src使用的是file協議。

　　由於web編輯器可以識別data協議，所以我們可以將img的src由file:改為data:image/png;base64，然後將修改後的新內容複製至剪下板。這樣就解決了問題。

　　這種方式很像遊戲中的外掛。

4 關鍵程式碼

 /**

  *

  */

 private void handle() {

     try {

         // 從剪下板中複製內容

         Clipboard clipboard = Clipboard.getSystemClipboard();

         String html = clipboard.getHtml();

         textArea1.setText(html);
 

         // 處理image節點

         String newHtml = handleImageNode(html);

         textArea2.setText(newHtml);

         // 將新內容複製至剪下板

         ClipboardContent content = new ClipboardContent();

         content.putHtml(newHtml);

         Clipboard.getSystemClipboard().setContent(content);

     } catch (IOException e1) {
 

         e1.printStackTrace();

     }

 }

 /**

  * @param html

  * @returnimagedata

  */

 private String handleImageNode(String html) throws IOException {

     Document document = Jsoup.parseBodyFragment(html);

     Elements allElements = document.getAllElements();

     for (Element element : allElements) {

         // 將img節點中的src為base64編碼

         if (element.tagName().equals("img")) {

             String src = element.attr("src")

                     .replace("file:///", "");

             File srcFile = new File(src);

             byte[] bytes = FileUtils.readFileToByteArray(srcFile);

             String base64Str = Base64.getEncoder().encodeToString(bytes);

             String newSrc = "data:image/png;base64," + base64Str;

             element.attr("src", newSrc);

         }

     }

     //

     return document.body().html();

 }
 

handleImageNode()方法讀取臨時目錄中的圖片檔案，將之轉換為base64字串，然後將img節點的協議由file改成data:image/png;base64。這裡用到了jsoup庫，jsoup庫是一個專門用於處理html的庫。

handle()方法先讀取剪下板中的html型別的條目，然後修改它的img內容，最後將新內容複製到剪下板。這裡用到了javafx的ClipBoard API，它可以讀寫OS的剪下板。

5 演示

• 執行附件中WordApp.java
• 開啟summernote編輯介面。
• 開啟附件“示例檔案.docx”，全選並複製。
• 點選WordApp.中的”處理”按鈕。切換至summernote介面，將焦點放在編輯框內，ctrl+v。

6 參考

summernote https://summernote.org/examples/#click-to-edit

附件https://files.cnblogs.com/files/dehai/summernote-word.zip