java xheditor 上传图片_xhEditor粘贴图片自动上传到服务器(Java版)
由于工作需要必须将word文档内容粘贴到编辑器中使用
但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题
考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解决这一问题
发现不管什么编辑器只要将图片转换成base64后就可以直接使用(IE8及一下可能不支持),由于编辑器中添加word文档功能也只是自己用,因此可以忽略这种浏览器了
找了很久,试用了很多编辑器,发现只有ckeditor的功能还算符合我的需求(支持自定义HTML属性)
然后我写了一个监听粘贴事件的操作,用来获取粘贴之后的file:///xxxx.jpg这种路径
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();
将以上代码保存为一个word.js文件
然后执行 node word.js就会自动创建一个http服务了
这个时候我们在编辑器中使用jsonp获取到处理完的图片数据替换原来的file:///xxxxxx.jpg路径就搞定了
处理word图片批量上传的代码
其它的业务逻辑参数代码
当然也可以将以上代码打包成一个本地执行文件去给不懂电脑的人使用就行了(具体方法我这里就不说了)
前台引用的代码
下面是实现后的效果,能够自动上传Word中的所有图片,并且有进度条显示
所有图片都能够保存在服务器中,而且支持分布式图片存储
编辑器中的图片地址已经全部替换成了服务器的图片地址,其它的用户也能够正常访问
讨论群:223813913
java xheditor 上传图片_xhEditor粘贴图片自动上传到服务器(Java版)相关推荐
- ckeditor java 上传_CKEditor粘贴图片自动上传到服务器(Java版)
环境:java,springmvc,ckeditor,tomcat,maven 情况:在做项目的时候发现本地图片粘贴到ckeditor中,img标签的src中的值是"data:image/p ...
- 百度编辑器图片上传 java_百度编辑器粘贴图片自动上传到服务器(Java版)
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无 ...
- 织梦CMS粘贴图片自动上传到服务器(Java版)
如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- umeditor粘贴图片自动上传到服务器(Java版)
当前功能基于PHP,其它语言流程大致相同 1.新增上传word json配置 在ueditor\php\config.json中新增如下配置: /* 上传word配置 */ "wordAct ...
- quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
- java窗体广告墙(图片上传)java广告系统
java窗体广告墙(图片上传)java广告系统 public Swingtest002() {// 设置标题setTitle("请登陆");// 绝对布局setLayout(nul ...
- KindEditor实现WORD粘贴图片自动上传
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
- python实现自动上传图片_python 实现图片自动上传七牛返回地址
python 实现图片自动上传七牛返回地址 使用markdown编写文件,图片插入一直不太方便,有些markdown编辑器实现的图片插入并且自动上传的功能,但是大多要收费,免费的又存在各种限制,不能自 ...
- java中为按钮添加图片_如何在Java中为字符串添加双引号?
java中为按钮添加图片 In Java, everything written in double-quotes is considered a string and the text writte ...
最新文章
- python 判断中文标点符号_Python入门编程题库27--生成随机密码
- Windows7无损分区
- 操作系统(1) 发展历史
- java登陆session用法_java中session用法
- 【机器学习】EM算法详细推导和讲解
- 点钞机语音怎么打开_我有这些语音识别指令,你都知道吗?
- linux 管道 线程,linux中通过管道实现qq的聊天功能,用到了线程
- 《JavaScript 高级程序设计(第四版)》
- 基础面试题:JSP和Servlet
- php音频怎么打开,音频管理器怎么设置
- 大数据是什么?大数据的定义?
- 个人网站建设教程|本地网站环境搭建|网站制作教程
- LeetCode 2300. 咒语和药水的成功对数(二分查找)
- 爬虫大作业-爬取B站弹幕
- 教育培训机构如何打赢“教育营销流量战“?
- ArcGIS Pro添加在线遥感底图
- 从微信办公看信息泄露
- cuda的tip: nvcc的-arch,-code选项
- Windows SWIG 安装与部署
- sim900a 裸AT通过GPRS网络发送接收数据