富文本编辑器实现从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