富文本编辑器实现从word中复制图片

时间：2024-01-27 07:09:01

1问题

　　基于web的富文本编辑器的功能普遍较弱，而word是公认的宇宙第一好用的文档编辑器，所以许多人都习惯先在word中编辑，然后再将内容粘到web富文本编辑器中。

　　但是，这种操作有一个问题：图片带不过来，无法显示。如下所示。

clip_image002

　　我找到了一个方法来解决这个问题。

2 测试环境

summernote 0.8.18

office 2013

java 8

jsoup 1.7.2

3 原理

　　当我们按ctrl+c复制word中的图文内容时，在系统的剪切板中会生成了一个类型为HTML的条目。这个条目的内容类似于:

clip_image004

　　如上图所示，在运行期间word会将图片释放至某个临时目录，src使用的是file协议。

　　由于web编辑器可以识别data协议，所以我们可以将img的src由file:改为data:image/png;base64，然后将修改后的新内容复制至剪切板。这样就解决了问题。

　　这种方式很像游戏中的外挂。

4 关键代码

  1 /**
  2  *
  3  */
  4 private void handle() {
  5     try {
  6         // 从剪切板中复制内容
  7         Clipboard clipboard = Clipboard.getSystemClipboard();
  8         String html = clipboard.getHtml();
  9         textArea1.setText(html);
 10         // 处理image节点
 11         String newHtml = handleImageNode(html);
 12         textArea2.setText(newHtml);
 13         // 将新内容复制至剪切板
 14         ClipboardContent content = new ClipboardContent();
 15         content.putHtml(newHtml);
 16         Clipboard.getSystemClipboard().setContent(content);
 17 
 18     } catch (IOException e1) {
 19         e1.printStackTrace();
 20     }
 21 }
 22 
 23 
 24 /**
 25  * @param html
 26  * @returnimagedata
 27  */
 28 private String handleImageNode(String html) throws IOException {
 29     Document document = Jsoup.parseBodyFragment(html);
 30     Elements allElements = document.getAllElements();
 31     for (Element element : allElements) {
 32         // 将img节点中的src为base64编码
 33         if (element.tagName().equals("img")) {
 34             String src = element.attr("src")
 35                     .replace("file:///", "");
 36             File srcFile = new File(src);
 37             byte[] bytes = FileUtils.readFileToByteArray(srcFile);
 38             String base64Str = Base64.getEncoder().encodeToString(bytes);
 39             String newSrc = "data:image/png;base64," + base64Str;
 40             element.attr("src", newSrc);
 41         }
 42     }
 43     //
 44     return document.body().html();
 45 }
 46 
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

 

相关文章