富文本編輯器實現從word中復制圖片

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