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

梦里梦外; 2022-02-24 13:18 640阅读 0赞

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

[怎么保证用富文本编辑器不让服务器产生垃圾图片，神器redis的发布订阅][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)
    		}
    	}
    }

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

[redis]: https://blog.csdn.net/qq_37316272/article/details/87928879