怎么保证用富文本编辑器不让服务器产生垃圾图片，神器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的发布订阅做富文本编辑器发布文章的时候，有这样一个需求，就是直接使用qq的快捷键截图，然后直接在富文本编辑器把图片粘贴了，然后图片就可以自动上传到服务器，我测试了一些富文本有的是可以实现了的，但summernote就没有实现...
				
chrome有很多人性化的API，比如拖拽， 比如图片可以转化为base64等；
　　 比如知乎上面的回复中可以直接黏贴图片，  就不需要手动点击图片上传按钮， 选择图片， 确认上传等等； 知乎参考地址：打开 
 　　让编辑器支持word的复制黏贴， 其中图片会转化为base64编码， 如果是通过远程打开这个静态页， 黏贴word文档的时候， 图片不会黏贴进来， 因为远程地址无法访问本地磁盘的绝对路径， 如果把下面代码保存成静态界面打开， 那么word中的图片都可以看见， 而且都会被转化为base64编码；
　　 编辑器支持截屏的黏贴；
　　 让编辑器支持图片直接拖拽， 直接拖拽即可添加图片，
				
由于工作需要必须将word文档内容粘贴到编辑器中使用
但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题
考虑到自己除了工作其他时间基本上不使用windows，因此打算使用nodejs来解决这一问题
发现不管什么编辑器只要将图片转换成base64后就可以直接使用（IE8及一下可能不支持），由于编辑器中添加word文档功能也只是自己用，因此可以忽略这种浏览器了
找了很久，试用了很多编辑器，发现
				
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题，于是各种网上扒拉，终于找到解决方案，在这里感谢一下知乎中众大神以及TheViper。
通过知乎提供的思路找到粘贴的原理，通过TheViper找到粘贴图片的方法。
其原理为一下步骤：
监听粘贴事件；【用于插入图片】
获取光标位置；【记录图片插入位置】
获取剪切板内容；【主要是获取文件】
上传剪切板图片；
在指定光标位置插入图片。
以下是代码部分：
1.获取光标代码部分，大部分都是直接利用TheViper的代码，只是做了简单的修改，在获
				
最近公司做项目需要实现一个功能，在网页富文本编辑器中实现粘贴Word图文的功能。
我们在网站中使用的Web编辑器比较多，都是根据用户需求来选择的。目前还没有固定哪一个编辑器
有时候用的是UEditor,有时候用的CKEditor,KindEditor,TinyMCE。
在网上查了很多资料，UEditor和其它的Web编辑器（富文本编辑器）在Chrome中可以支持单张图片粘贴。但是我们的用户需...
				
在使用summernote的富文本编辑器，在粘贴word内容时，会发现代码中有很多无效的代码。通过js处理，可以去掉很多无用的代码。
处理前，粘贴后的代码类似这样：
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
先说说实例化一个summernote 的方法把，其实也不难，jq 选择器选择一个要变成富文本编辑器的元素然后调用 summernote 方法传入一个对象作为参数便可，参数是一个对象，属性就是这个富文本的一些样式属性，如下：
上面的属性是一些比较常用的属性，更多属性可以查看官方文档...
   layui框架目前2.x版本中未增加富文本编辑器的相关事件的API说明。所以当我们需要使用一些监听事件时，就没有那么快速使用当前富文本编辑器。
编辑器监听内容改变事件具体实现：
首先编辑器初始化
<script>
 //加载模块
    layui.use(['layer', 'layedit'], function () {
        var lay...
//监听粘贴图片
document.getElementsByClassName('note-editable')[0].addEventListener('paste',function(e){
  if ( !(e...
				
<div id="div-textarea"  contenteditable="true" style="width: 260px;"></div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script type="text/javascript">
			document.getElementById(".
				es启动错误max file descriptors [4096] for elasticsearch process is too low, increase to at least [65536]