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