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

富文本编辑器实现从word中复制图片(外挂)的更多相关文章

  1. 富文本编辑器直接从 word 中复制粘贴公式

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  2. 富文本编辑器+可粘贴word内容

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难 ...

  3. 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  4. Ueditor富文本编辑器--Ctrl V 粘贴后原有图片显示错误

    最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...

  5. KindEditor富文本编辑器, 从客户端中检测到有潜在危险的 Request.Form 值

    在用富文本编辑器时经常会遇到的问题是asp.net报的”检测到有潜在危险的 Request.Form 值“一般的解法是在aspx页面   page  标签中加上 validaterequest='fa ...

  6. 如何从word文档复制内容到富文本编辑器

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  7. 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

  8. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  9. JAVA 集成 Ueditor 百度富文本编辑器

    开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...

随机推荐

  1. Python数据分析之双色球高频数据统计

    Step1:基础数据准备(通过爬虫获取到),以下是从第一期03年双色球开奖号到今天的所有数据整理,截止目前一共2549期,balls.txt 文件内容如下 : 备注:想要现成数据的可以给我发邮件哟~ ...

  2. STL中常用算法

    一.排序 sort sort(first_pointer,first_pointer+n,cmp) 默认为升序 若要使用降序,自行写cmp 函数 bool cmp(int a,int b){ retu ...

  3. Php-webdriver 的安装与使用教程

    Php-webdriver 是 Facebook 开发的基于 PHP 语言实现的 Selenium WebDriver 客户端组件,可以用它来操作浏览器.常见的操作包括:自动化测试.采集数据等. 安装 ...

  4. (二)linux三剑客之awk

    1.awk是什么和上一节的grep有什么区别? 2.awk解决了哪些问题? 3.awk的工作原理? 4.awk的基础用法? 5.awk技术常用[收藏] 1.awk是什么? awk 用于处理文本,gre ...

  5. 构造函数继承与class继承

    构造函数继承 1.子类通过apply方法或者call方法把this指向父类 js代码 function Parent(name, age) { this.name = name this.age = ...

  6. Python 抓取网页tag操作

    1. 获取操作tag 获取操作tag的接种方式: soup.find_all(name=None, attrs={}, recursive=True, text=None, limit=None, * ...

  7. getline使用问题

    1.输入string string s1; getline(cin,s1); cin>>s1; //注意cin遇到空格会终止,而getline不会 2.关于吞回车问题 输入n后要记得吞回车 ...

  8. sql server 取多条数据的最大值

    实列: SELECT a.BillDate '[开票时间]', a.Hdbh '[运单号]', a.Status '运单状态', a.DisplayStatus '运单状态字', b.name '开票 ...

  9. 如何修改npm仓库地址

    解决方案 npm config set registry http://registry.npm.taobao.org/ 将npm默认设置为淘宝镜像地址 发布包 当你想发布自己的包时,需要将地址修改回 ...

  10. refs转发 React.forwardRef

    2020-04-01 refs转发 前几天刚总结完ref&DOM之间的关系,并且想通了3种ref的绑定方式 今天总结一下refs转发 这是react中一直困扰我的一个点 示例: 输入: wor ...