ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

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

returnnew 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/10/17/ckeditor-%e5%ae%9e%e7%8e%b0ctrlv%e7%b2%98%e8%b4%b4%e5%9b%be%e7%89%87%e5%b9%b6%e4%b8%8a%e4%bc%a0%e3%80%81word%e7%b2%98%e8%b4%b4%e5%b8%a6%e5%9b%be%e7%89%87/

原文地址:https://www.cnblogs.com/songsu/p/11690945.html

时间: 2024-11-07 02:32:20

ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片的相关文章

Html5+asp.net mvc 图片压缩上传

在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 废话不多少不多说直接看代码: 本次测试使用了 zepto.min.js 插件,更新版本的下载请点击这里 主要js代码: //图片压缩处理 ; (function () { /** * 加载的时候进行抽样检测 * 在iOS中,大于2M的图片会抽样渲染 */ func

【方法】如何实现图片压缩上传

[参考文章] 前端实现图片压缩上传功能 H5实现图片先压缩再上传 原文地址:https://www.cnblogs.com/wannananana/p/12050442.html

xhEditor实现ctrl+v粘贴word图片并上传

自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片.需要用户手动一张张上传Word图片.如果只有一张图片还能够接受,如果图片数量比较多,这种操作就显得非常的麻烦. 1.只粘贴图片并上传到服务器 config.extraPlugins = 'uploadimage'; //config.uploadUrl = '上传路径

图片(画布上的图片)上传总结

最近在做图片上传的一些东西,目前为止已经做的相对比较完善了,所以对图片上传做一些总结. 我最初的想法是把html5的标签canvas上的图片得到,上传到服务器上并能够及时预览. canvas上的图片分为两种情况: 1.自己绘制上去的.代码如下: var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,

asp.net+swfupload 多图片批量上传(附源码下载)

asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教程所使用的flash上传文件是 swfupload,下面会有源码下载链接. 使用工具 vs 2010. 演示效果图 第一步 新建一个web项目 第二步 引入所需swfuplod文件(swfupload.swf,js,css等) 第三步 新建一个一般处理程序(upload.ashx) upload.a

Android高仿微信图片选择上传工具

源码托管地址:https://github.com/SleepyzzZ/photo-selector 话不多说,先上效果图(高仿微信图片选择器): 图片选择界面: 图片预览界面: 批量上传图片: 实现的功能介绍: 1.图片异步加载,使用Glide开源库实现加载; 2.图片的预览界面,支持左右滑动,双击放大浏览; 3.图片批量上传,使用OkHttp来实现与Servlet服务器的通信; 使用方法(Android Studio): 新建工程,File->New->Import Module导入pho

如何有效实现前端压缩图片并上传功能

随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求.这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么下面就跟大家讲解一下如何在前端进行图片压缩后上传到服务器. 以上传单张图片为例,多张图片同理,多嵌套一层循环即可.代码实现如下: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta

KindEditor3.x-自动上传Word图片功能.

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法处理多张图片.而且转换成BASE64后是作为内容一起提交给服务器,不能够将图片单独保存在另外一台服务器中.如果需要单独保存则需要自已进行处理.比较麻烦. 我希望打开Word或者WPS文档后,复制内容然后直接粘贴到富文本编辑器中,编辑器自动将图片批量上传到服务器中,无论文档中有多少张图片,编辑器都全部

onethink框架 编辑器图片没有上传权限

昨天遇到了一个有点蛋疼的问题,创建了一个用户,但是在添加数据的时候,发现编辑器中的图片上传不能使用老是提示下图的那种提示: 然后自己一直在想,怎么编辑器还要图片上传权限呢,淡淡的忧伤啊.然后自己琢磨了一会,发现自己解决不了.立马到Q群中询问,一问,还真的搞定了.原来是要设置权限,不过这个权限是框架数据中早就有了,我们只需要勾选上就可以了.当然了,我这种情况只适用于直接在框架demo上扩展使用的项目,如果完全是自己编写的,那就要看你们各自的构建是咋样的啦.废话不多说,上图:这下子清净了,搞定,再也