使任何富文本编辑器可粘贴图片，js监听鼠标粘贴事件，亲测summernote编辑器

之我有一篇文章写到了，怎么处理富文本上传图片后单用户删除了，造成服务器大量垃圾图片的问题，解决方案请戳链接

怎么保证用富文本编辑器不让服务器产生垃圾图片，神器redis的发布订阅

做富文本编辑器发布文章的时候，有这样一个需求，就是直接使用qq的快捷键截图，然后直接在富文本编辑器把图片粘贴了，然后图片就可以自动上传到服务器，我测试了一些富文本有的是可以实现了的，但summernote就没有实现，但我想用这个怎么办，于是就搜索整合出了解决方案。

实现原理就是，js直接监听鼠标的粘贴事件，如果粘贴的内容含有图片，就直接上传到服务器，并将图片显示在页面上！

下面是关键代码：

 获取编辑框，添加监听粘贴事件：

//summernote
//监听粘贴图片
document.getElementsByClassName('note-editable')[0].addEventListener('paste',function(e){
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return;
    }
    for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
        var item = e.clipboardData.items[i];

        if (item.kind === "string") {
            item.getAsString(function (str) {
                console.log(str);
            })
        } else if (item.kind === "file") {
            var f= item.getAsFile();
			parseFile(f, 800,function(base64){
				$.post("/manager/uploadImg",{"imgStr":base64},function(data){
					$('#summernote').summernote('editor.insertImage', data.msg);
	         	});
			})
            console.log(f);
        }
    }
});

 这里说明一下这个parseFile方法，就是将图片转化为base64编码，并压缩base64编码，然后上传到服务器。

代码我也贴出来吧：

//压缩方法
function parseFile(file, w,callBack) {
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(e){
		var newImage = new Image();
		var quality = 0.7;    //压缩系数0-1之间
		newImage.src = reader.result;
		console.log("原来长度",reader.result.length)
		newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
		var imgWidth, imgHeight;
		newImage.onload = function () {
			imgWidth = this.width;
			imgHeight = this.height;
			var canvas = document.createElement("canvas");
			var ctx = canvas.getContext("2d");
			if (Math.max(imgWidth, imgHeight) > w) {
				if (imgWidth > imgHeight) {
					canvas.width = w;
					canvas.height = w * imgHeight / imgWidth;
				} else {
					canvas.height = w;
					canvas.width = w * imgWidth / imgHeight;
				}
			} else {
				canvas.width = imgWidth;
				canvas.height = imgHeight;
				quality = 0.7;
			}
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
			var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
			// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
			while (base64.length / 1024 > 100) { 
			 	quality -= 0.01;
			 	base64 = canvas.toDataURL("image/jpeg", quality);
			}
			// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
			// while (base64.length / 1024 < 50) {
			// 	quality += 0.001;
			// 	base64 = canvas.toDataURL("image/jpeg", quality);
			// }
			console.log("压缩后长度",base64.length)
			callBack(base64)
		}
	}
}

利用这个思路，基本上可以应对任何的富文本了吧，只要支持上传方法重写就可以！