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

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

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

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

详细思路及源码

示例下载：

wordpaster-vue3-cli-ueditor1.5，wordpaster-vue-ueditor1.5，wordpaster-asp.net-ueditor1.5x，wordpaster-php-ueditor1x，wordpaster-jsp-ueditor1x

富文本编辑器实现一键复制word图片相关推荐

html编辑保存为word文档,html 保存成word (富文本编辑器导出内容成word)
这几天项目里有个需求,用到富文本编辑器,然后导出word. 富文本编辑器,网上很多,使用夜很简单,我们使用的是kindEditor.百度的ueditor很好,而且文档很全.阿里的kissy 感觉比较复 ...
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
富文本编辑器实现一键粘帖word图片
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
fastnest怎么一键排版_富文本编辑器的一键排版功能
在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...
富文本编辑器的一键排版功能
在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...
Vue 自定义富文本编辑器 tinymce 支持导入 word 模板
自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目前端前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: t ...
braft-editor 富文本编辑器在谷歌复制图片出现两张
最近在用braft-editor 做富文本编辑器时候,发现在桌面或者网页复制图片,利用快捷键ctrl+v 或右键粘贴是,图片都是一张,但是如果在微信里面复制图片,再次粘贴到编辑器,就会自动出现两张(仅 ...
富文本编辑器iceEditor中上传word并回显
项目中有需求,用户通过全选word中的图片和文字,然后直接粘贴到富文本编辑器中,可以正常显示,但是实际开发中发现word多图片粘上去的时候图片全部都是file本地路径,无法正常显示,于是考虑另一种思路 ...
element-tiptap富文本编辑器，上传本地图片
因为通过富文本编辑器上传本地图片,都会直接转成base64格式的,我们可以先上传到服务器,再从服务器返回的URL拿到给富文本框展示(引入我就不说了,直接看我上篇文章有说到过) data () {// ...

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

富文本编辑器实现一键复制word图片相关推荐

最新文章

热门文章