关于umeditor粘贴图片自动上传

由于工作需要必须将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();

</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

关于umeditor粘贴图片自动上传相关推荐

umeditor粘贴图片自动上传到服务器(Java版)
当前功能基于PHP,其它语言流程大致相同 1.新增上传word json配置在ueditor\php\config.json中新增如下配置: /* 上传word配置 */ "wordAct ...
ckeditor java 上传_CKEditor粘贴图片自动上传到服务器（Java版）
环境:java,springmvc,ckeditor,tomcat,maven 情况:在做项目的时候发现本地图片粘贴到ckeditor中,img标签的src中的值是"data:image/p ...
KindEditor实现WORD粘贴图片自动上传
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
百度编辑器图片上传 java_百度编辑器粘贴图片自动上传到服务器(Java版)
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无 ...
java xheditor 上传图片_xhEditor粘贴图片自动上传到服务器(Java版)
由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
织梦CMS粘贴图片自动上传到服务器(Java版)
如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
element upload组件，ctrl v粘贴图片自动上传
产品提了一个需求,需要用户可以在微信或者qq截屏之后,ctrl v直接上传图片,网上查了几篇文章参考了其中一篇实现了参考文章:https://blog.csdn.net/rencaishigepi/ ...
wordpress插件Imagepaste的命名规则修改（一款直接复制粘贴图片自动上传的编辑器增强插件）
这款组件还是不错的,就是命名规则为把原文件名进行MD5编码,这样,如果原文件名出现一样的情况就发疯了. 所以,动手改写插件...... 找到插件的目录, 打开wp-content目录下plugins/ ...
KindEditor 图片粘贴上传，实现图文粘贴，图片自动上传
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. umed ...

关于umeditor粘贴图片自动上传

关于umeditor粘贴图片自动上传相关推荐

最新文章

热门文章