富文本编辑器实现从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
富文本编辑器实现从word中复制图片(外挂)的更多相关文章
- 富文本编辑器直接从 word 中复制粘贴公式
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- 富文本编辑器+可粘贴word内容
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难 ...
- 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- Ueditor富文本编辑器--Ctrl V 粘贴后原有图片显示错误
最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...
- KindEditor富文本编辑器, 从客户端中检测到有潜在危险的 Request.Form 值
在用富文本编辑器时经常会遇到的问题是asp.net报的”检测到有潜在危险的 Request.Form 值“一般的解法是在aspx页面 page 标签中加上 validaterequest='fa ...
- 如何从word文档复制内容到富文本编辑器
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- vue集成百度UEditor富文本编辑器
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...
- JAVA 集成 Ueditor 百度富文本编辑器
开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...
随机推荐
- Python数据分析之双色球高频数据统计
Step1:基础数据准备(通过爬虫获取到),以下是从第一期03年双色球开奖号到今天的所有数据整理,截止目前一共2549期,balls.txt 文件内容如下 : 备注:想要现成数据的可以给我发邮件哟~ ...
- STL中常用算法
一.排序 sort sort(first_pointer,first_pointer+n,cmp) 默认为升序 若要使用降序,自行写cmp 函数 bool cmp(int a,int b){ retu ...
- Php-webdriver 的安装与使用教程
Php-webdriver 是 Facebook 开发的基于 PHP 语言实现的 Selenium WebDriver 客户端组件,可以用它来操作浏览器.常见的操作包括:自动化测试.采集数据等. 安装 ...
- (二)linux三剑客之awk
1.awk是什么和上一节的grep有什么区别? 2.awk解决了哪些问题? 3.awk的工作原理? 4.awk的基础用法? 5.awk技术常用[收藏] 1.awk是什么? awk 用于处理文本,gre ...
- 构造函数继承与class继承
构造函数继承 1.子类通过apply方法或者call方法把this指向父类 js代码 function Parent(name, age) { this.name = name this.age = ...
- Python 抓取网页tag操作
1. 获取操作tag 获取操作tag的接种方式: soup.find_all(name=None, attrs={}, recursive=True, text=None, limit=None, * ...
- getline使用问题
1.输入string string s1; getline(cin,s1); cin>>s1; //注意cin遇到空格会终止,而getline不会 2.关于吞回车问题 输入n后要记得吞回车 ...
- sql server 取多条数据的最大值
实列: SELECT a.BillDate '[开票时间]', a.Hdbh '[运单号]', a.Status '运单状态', a.DisplayStatus '运单状态字', b.name '开票 ...
- 如何修改npm仓库地址
解决方案 npm config set registry http://registry.npm.taobao.org/ 将npm默认设置为淘宝镜像地址 发布包 当你想发布自己的包时,需要将地址修改回 ...
- refs转发 React.forwardRef
2020-04-01 refs转发 前几天刚总结完ref&DOM之间的关系,并且想通了3种ref的绑定方式 今天总结一下refs转发 这是react中一直困扰我的一个点 示例: 输入: wor ...