由于工作需要必须将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中的所有图片,并且有进度条显示

所有图片都能够保存在服务器中,而且支持分布式图片存储

编辑器中的图片地址已经全部替换成了服务器的图片地址,其它的用户也能够正常访问

更多详细资料可以参考这篇文章:

详细思路及源码

示例下载:

wordpaster-php-ckeditor4x,wordpaster-jsp-ckeditor4x,wordpaster-asp.net-ckeditor4x,wordpaster-asp-ckeditor4x,wordpaster-vue-ckeditor5

PHPMyWind支持ppt一键导入相关推荐

  1. ZBlog支持ppt一键导入

    1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...

  2. PHPMyWind支持ppt导入

    ueditor粘贴不能粘贴word中的图片是一个很头疼的问题,在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴,因为这个需求头疼了半个月,因为前端方面因为安全的原因是不允许访 ...

  3. PHPMyWind支持ppt上传

    当前功能基于PHP,其它语言流程大致相同 1.新增上传word json配置 在ueditor\php\config.json中新增如下配置: /* 上传word配置 */ "wordAct ...

  4. WordPress支持ppt一键上传

    1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...

  5. SiteFactory支持ppt一键上传

    1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...

  6. WordPress编辑器支持Word一键导入

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  7. 遵义微红科技社群直播分销系统支持第三方平台商品一键导入

    直播提升了客户对商家的信任感,商家能够更好的展现自己的商品信息,提升品牌形象.而商家可以靠直播这个模式去不断地培养客户的忠诚度,当场解决客户提出的问题,提升自己的业务能力,将潜在的客户转变为自己的分销 ...

  8. 淘宝客 SDK,一键导入淘宝客商城,快速实现流量变现。支持淘宝授权登录、免登录;一键接入各种商城模块 ; 一键配置淘宝客推广位,赚取收益

    TaokeSdk 项目地址:houhoudev/TaokeSdk  简介: 淘宝客 SDK,一键导入淘宝客商城,快速实现流量变现.支持淘宝授权登录.免登录:一键接入各种商城模块 : 一键配置淘宝客推广 ...

  9. 聚合供应链,一键导入百万商品

    ##极速部署Saas系统,聚合供应链,百万款产品任意选 社交电商风起云涌,供应链群雄争霸,我们不做供应链,我们做的是供应链的数据搬运工!! 从明天起,放弃淘宝客.京东客,接入淘宝.京东供应链,货还是交 ...

最新文章

  1. 基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理...
  2. 打开 hyper-v 批处理_如何控制批处理服务器
  3. flex布局常用属性
  4. mysql查询特定时间数据视频_mysql查询特定时间段内的数据
  5. python if条件判断和while循环 练习题
  6. java-Mysql学生管理系统
  7. 关于团队项目的一些感想——刘宇翔
  8. 第一天docker入门
  9. Java的搜索引擎框架
  10. 运行命令、文件扩展名速查、Windows运行命令大全
  11. html 发送ping帧,HTML5:ping属性之死亡ping与隐私追踪
  12. Springer Nature LaTex Template常见问题
  13. IFRAME 元素语法
  14. Windows10彻底关闭休眠功能
  15. 短文件名漏洞如何修复_IIS短文件名泄露漏洞修复解决方案?
  16. so库生成和用法汇总
  17. 企业流程篇--项目管理(七)
  18. 高企审计报告包括哪些内容?
  19. Android用Canvas画钟表仪
  20. 宝塔安装包下载linux版本,宝塔linux面板下载

热门文章

  1. Firefox OS应用程序入门
  2. Audiority Effects Plugin Bundle 2022.3 CE-win 效果器插件合集包
  3. thinkphp5oa管理系统
  4. 【ES实战】在Linux下 CentOS 7离线安装Rally2.7.0
  5. Byte 高位/低位简介绍(大端格式/小端格式)
  6. 【模拟】【NOIP2008】笨小猴 word
  7. bind()函数介绍
  8. 如何在CSDN中发布文章
  9. ubuntu14.04安装theano,cuda7.5
  10. 合同相似可逆等价矩阵的关系及性质_矩阵的合同与相似及其等价条件