如何将word图片复制到富文本编辑器里面
由于工作需要必须将word文档内容粘贴到编辑器中使用
但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题
考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解决这一问题
发现不管什么编辑器只要将图片转换成base64后就可以直接使用(IE8及一下可能不支持),由于编辑器中添加word文档功能也只是自己用,因此可以忽略这种浏览器了
找了很久,试用了很多编辑器,发现只有ckeditor的功能还算符合我的需求(支持自定义HTML属性)
然后我写了一个监听粘贴事件的操作,用来获取粘贴之后的file:///xxxx.jpg这种路径
<script>
var service = {
http : require('http'),
url : require('url'),
querystring : require('querystring'),
fs : require('fs'),
config : {
timeout : 60000,
charset : 'utf8',
port : 10101,
host : '127.0.0.1'
},
router : {
index : function(res, query){
res.end('Server is running!');
},
check : function(res, query){
var result = {status: 1, info: 'success'};
result = JSON.stringify(result);
if(typeof query.callback == 'string'){
result = query.callback + '(' + result + ')';
}
res.end(result);
},
word : function(res, query){
var _this = service;
var result = {status: 0, info: 'error'};
if(typeof query.file == 'string'){
var img = query.file.match(/file:\/\/+(localhost)?(\S+\.(png|jpg|jpeg|gif|bmp))/i);
console.log(img);
if(img){
var base64 = _this.base64_encode(img[2]);
result.status = 1;
result.info = 'data:image/' + img[3] + ';base64,' + base64;
}
}
result = JSON.stringify(result);
if(typeof query.callback == 'string'){
result = query.callback + '(' + result + ')';
}
res.end(result);
}
},
start : function(){
var _this = this;
var Server = _this.http.createServer(function (req, res) {
var URL = _this.url.parse(req.url);
var receive = [];
var router = null;
switch(URL.pathname){
case '/word':
router = _this.router.word;
break;
case '/check':
router = _this.router.check;
break;
default:
router = _this.router.index;
}
req.setEncoding(_this.config.charset);
req.addListener('data', function(data) {
receive.push(data);
});
res.writeHead(200, {'Content-Type': 'text/plain'});
res.on("close",function(){
console.log("res closed");
});
req.on("close",function(){
console.log("req closed");
});
req.addListener('end', function() {
router(res, _this.querystring.parse(URL.query));
});
});
Server.listen(_this.config.port, _this.config.host, 1024);
Server.setTimeout(_this.config.timeout, function(cli){
cli.end('timeout\n');
});
console.log('Server running at http://' + _this.config.host + ':' + _this.config.port);
},
//base64
base64_encode : function(file){
var bitmap = this.fs.readFileSync(file);
return new Buffer(bitmap).toString('base64');
}
};
service.start();
</script>
将以上代码保存为一个word.js文件
然后执行 node word.js就会自动创建一个http服务了
这个时候我们在编辑器中使用jsonp获取到处理完的图片数据替换原来的file:///xxxxxx.jpg路径就搞定了
处理word图片批量上传的代码
其它的业务逻辑参数代码
当然也可以将以上代码打包成一个本地执行文件去给不懂电脑的人使用就行了(具体方法我这里就不说了)
前台引用的代码
下面是实现后的效果,能够自动上传Word中的所有图片,并且有进度条显示
所有图片都能够保存在服务器中,而且支持分布式图片存储
编辑器中的图片地址已经全部替换成了服务器的图片地址,其它的用户也能够正常访问
详细内容可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/07/30/ckeditor%e7%b2%98%e8%b4%b4word/
讨论群:223813913
如何将word图片复制到富文本编辑器里面相关推荐
- android富文本图片自适应,Android 图片混排富文本编辑器控件
一.一个Android 图片混排富文本编辑器控件(仿兴趣部落) 1.1 图片混排富文本控件 是一种图片和文字混合在一起的控件,文本之间可以插入图片,类似于网页的排版样式. 1.2 该控件主要是仿兴趣部 ...
- Android 图片混排富文本编辑器控件
概述 一个Android 图片混排富文本编辑器控件(仿兴趣部落) 详细 代码下载:http://www.demodashi.com/demo/12032.html 一.一个Android 图片混排富文 ...
- 带格式粘贴至html富文本,防止复制/粘贴将网页样式复制到富文本编辑器
我想了两天现在几个JavaScript轻量级富文本编辑器(rte),如nicEdit,mooEditable,MooRTE(最后两个被认为是因为他们使用了我用于这个项目的mootools框架).防止复 ...
- 两文本一图片android,Android富文本编辑器(二):图文混排以及图片上传处理
对于一个富文本编辑器来说,图文混排是最基本的功能.而从上一篇文章中我们知道图文混排需要使用ImageSpan.下面这段代码摘自我的RichEditText源码: /** * 添加图片 * @param ...
- html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG
插件描述: 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编辑器的相关功能描述吧. 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编 ...
- 百度ueditor - 支持word上传的富文本编辑器
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
- wangEditor - 支持word上传的富文本编辑器
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
- 在线 - 支持word上传的富文本编辑器
这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...
- 本地Word图文直接复制到富文本编辑器中
当前功能基于PHP,其它语言流程大致相同 1.新增上传word json配置 在ueditor\php\config.json中新增如下配置: /* 上传word配置 */ "wordAct ...
最新文章
- Java 领域 offer 收割:程序员黄金 5 年进阶心得!
- redis 登录注册
- 利用Asp.Net Core的MiddleWare思想处理复杂业务流程
- 投稿指南 | 云计算领域最前沿资讯、技术,期待您的专业解读!
- 【Kafka】Kafka 实现 Exactly-once (ack机制、高水位)
- 消息中间件学习总结(1)——RocketMQ之专访RocketMQ联合创始人:项目思路、技术细节和未来规划
- MacBook Air 是什么意思
- 根据ReentrantLock -- 解析AQS原理
- 中英文网站googleSEO优化技巧
- AVX512与AVX2比较
- TPC-H介绍及实战总结
- 苹果电脑一直密码错误_您可能一直都在犯的安全和密码错误
- error: undefined reference to ‘_imp___ZN12QApplicationC1ERiPPci‘
- 推销计算机作文题目怎么写,怎样让作文题目吸引人 吸引人的作文题目怎么写...
- 唯样商城:芯片解密的优缺点有哪些
- 2012, PPSN,Geometric Semantic Genetic Programming,GSGP
- 第19篇:WEB漏洞~SQL注入~SqlMap绕过WAF
- 如何在macOS 中让Gatekeeper在任何地方允许应用程序
- 基于Android Q的OTA包制作/签名(包含差分包)
- android 自定义关机界面,怎么定制Android关机界面
热门文章
- php免费利用飞信发送验证码,php结合飞信 免费天气预报短信
- 制作杂志级图表的第一步:突破Excel的默认颜色
- IDEA开发工具安装及简单的项目创建
- iscsi 服务启动失败的解决方法
- 就地过年,别让加班费“就地蒸发”
- 编译型语言与解释型语言详解_Java什么是编译与解释共存的语言
- 在ubuntu系统下安装缺少的字体(一般缺少中文字体)
- CAS单点登录的时候出现票根'ST-xxxxxx-cas'不符合目标服务
- 【回炉再造】C++学习笔记(一)
- 微型计算机2017年2月,2018年1-2月份规模以上工业增加值增长7.2%