由于工作需要必须将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-vue3-cli-ueditor1.5,wordpaster-vue-ueditor1.5,wordpaster-asp.net-ueditor1.5x,wordpaster-php-ueditor1x,wordpaster-jsp-ueditor1x​

PHPMyWind支持Word导入相关推荐

  1. PHPMyWind支持ppt导入

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

  2. PHPMyWind编辑器支持Word导入

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

  3. PHPMyWind支持PowerPoint导入

    当前功能基于PHP,其它语言流程大抵相同. 大概流程: 1. 将docx文件上传到服务器中 2. 使用PHPoffice/PHPword实现将word转换为HTML 3. 将HTML代码返回并赋值到编 ...

  4. PHPMyWind支持Word粘贴

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例: 打开umeditor.js,找 ...

  5. ie如何导入html文件类型,Magicodes.IE: 导入导出通用库,支持Dto导入导出以及动态导出,支持Excel、Word、Pdf和Html。...

    Magicodes.IE 导入导出通用库,支持Dto导入导出以及动态导出,支持Excel.Word.Pdf和Html. 疯狂的徽章 GitHub Azure DevOps Build Status: ...

  6. WordPress编辑器支持Word文档一键粘贴

    百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,... ueditor实现word文档的导入和下载功能的方法:1.UEditor没有提供word的导入功能,只能说是粘贴复制. ...

  7. 源泉书签,助您管理海量收藏。www.yuanquanshuqian.com 今日更新:支持了导入url为js代码的书签...

    源泉书签,助您管理海量收藏.www.yuanquanshuqian.com 今日更新:支持了导入url为js代码的书签 转载于:https://www.cnblogs.com/jzssuanfa/p/ ...

  8. Cocos Studio 2.3.2不再支持直接导入PSD文件

    以前的Cocos Studio(例如我以前的游戏版本使用CocoStudio 1.4)支持直接导入PhotoShop的PSD图像文件,但是当前的Cocos Studio 2.3.2(相应于cocos2 ...

  9. Doris支持spark导入设计文档

    Doris支持spark导入设计文档 背景 Doris现在支持Broker load/routine load/stream load/mini batch load等多种导入方式. spark lo ...

最新文章

  1. 软件测试工程师的职业生涯规划
  2. 数据库-优化-通过执行计划查询分析SQL执行计划-每个字段的说明
  3. iOS tabview 适配问题
  4. 【6】JAVA---地址App小软件(QueryPanel.class)(表现层)
  5. easyExcel 使用指南详解
  6. 一加手机虚拟键失灵解决方案
  7. python函数参数是数据库表名_Python-sqlite中的变量表名称
  8. java的安装_java 安装步骤
  9. 服务器部署Java项目详述
  10. 二叉树非递归遍历——python
  11. COMSOL报错调试总结(不定期更新)
  12. 深度学习中的有监督学习和无监督学习
  13. WebSocket对象的“readyState”属性记录连接过程中的状态值
  14. 实名域名是什么意思?域名必须要进行实名认证吗?
  15. android购票日历,2017春运购票日历
  16. python音频处理库librosa基本操作
  17. Android手机屏幕不清晰,4大参数如何影响屏幕显示清晰度
  18. Android包管理机制(三)PMS处理APK的安装
  19. 驱动中platform resource 和 porbe 之间的关系
  20. 无源晶振和有源晶振作用

热门文章

  1. ffmpeg的api里av_free和av_freep的区别
  2. hss网元 java_在NB-IoT建构和流程中,作为网元实体的MME和HSS进行了哪些功能方面的升级?...
  3. Gif动图如何在线编辑?教你三步在线编辑动图
  4. 字符串排序算法:低位优先排序(LSD)
  5. Oracle中实现分页
  6. 【Educoder作业】CC++指针实训
  7. 达梦数据交换平台软件DMETL部署
  8. More than one file was found with OS independent path 'META-INF/proguard/androidx-annotations.pro'
  9. 2021 Python入门资料汇总
  10. 村庄规划工作底图制作