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

科讯使用的:ckeditor编辑器.复制word图片.一直沾不上去.谁有好的解决办法呢相关推荐

  1. 基于Word的论文多级标题与图表题注的解决办法

    基于Word的论文多级标题与图表题注的解决办法 多级列表 多级按钮 定义新的列表样式 设置多级列表 章 节 小节 图注设置 表注的设置 样式的应用 图表排序的应用 总结 附录 如何在大纲中去掉不需要的 ...

  2. 富文本编辑器实现一键复制word图片

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  3. ueditor编辑器复制粘贴图片上传

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  4. kindeditor编辑器复制粘贴图片上传

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  5. wangeditor编辑器复制粘贴图片上传

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

  6. 从其它地方复制的代码到VS 提示无法识别的标记的解决办法

    有时候从其它地方复制了代码到vs会提示无法识别的标记. 有两种解决办法. 目录 1.解决办法是先将代码复制到word,再复制到vs就可以了. 2.将其复制到notepad++,然后ctrl+A全选,然 ...

  7. 百度在线编辑器 显示html,UEditor百度编辑器中JS/html代码(script标签)被过滤的解决办法...

    作为一名程序员,在文章中经常会插入各种代码,大部分代码都不会发生问题,但div和script标签是经常会被使用到的. 而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器 ...

  8. Word 插件中没有Endnote(Cwyw Citation Recognizer)解决办法

    前一段时间Word和endnote出现问题了,在网上百度了很久也没有找到办法,后来自己捣鼓了半天最终无意发现解决办法,分享给大家,希望能帮到正在写论文的童鞋~~ 主要症状:Word可以使用,endno ...

  9. 剪切板复制word图片是本地路径_如何将图片数学公式快速输入到Word中?

    背景: 在日常科研.学习与工作中,我们可能需要使用到某些书籍.期刊或者规范上的公式,但是如果自己纯手打则会相当麻烦(数学系LaTeX高手请忽略),因此如果有工具能够解决这个问题,那真的是解决了一大痛点 ...

最新文章

  1. JavaScript系列-(原型-原型连-call-apply-继承)
  2. Windows Server 2012正式版RDS系列②
  3. shell中取字符串子串的几种方式
  4. Java 中,类、类对象、泛型之间的转换
  5. 『设计模式』小老弟你猜不透我?-- 代理模式
  6. 的garch预测_随机森林预测
  7. 李彦宏:想活150得靠AI,雷军:下代旗舰机更AI | 大佬乌镇论道
  8. 去除A和B数组中的交集
  9. 8.1 段子中“酷毙”了的IT行业——《逆袭大学》连载
  10. 初唐名臣---凌烟阁上二十四功臣
  11. Omni-ID 推出2款有源RFID标签
  12. 如何连接Access数据库
  13. 计算机基础知识考试技巧,计算机二级考试Office应试技巧
  14. matlab, 生成一个数值一样的n维列向量
  15. caffe 创建网络模型
  16. html制作美容热点产品,美容热点产品.html
  17. python 常用转义字符对照表 键盘各键对应的ASCII码值
  18. UE4之简单的多人游戏
  19. 几个好用Maven 镜像仓库地址
  20. 4.怎么理解相互独立事件?真的是没有任何关系的事件吗? 《zobol的考研概率论教程》

热门文章

  1. java乐观锁实现_Java 乐观锁原理与实战演练
  2. js字符串中换行符不起作用如何解决
  3. 【HDU4276】The Ghost Blows Light
  4. DW1820a 黑苹果开机一段时间 卡死机问题或者屏蔽针脚问题
  5. JSON.parse、JSON.stringify、jQuery.parseJSON的区别
  6. matlab模拟三体运动_三体运动的matlab演示.docx
  7. 第四次工业革命到来 中企动力赋企业“生长之力”
  8. Spring Security的配置机制早就变了
  9. iPhone 的一些必备软件
  10. Python 采用Scrapy爬虫框架爬取豆瓣电影top250