KindEditor4.1.10,支持粘贴图片

Posted code never lies

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了KindEditor4.1.10,支持粘贴图片相关的知识,希望对你有一定的参考价值。

转载自https://blog.csdn.net/jimmy0021/article/details/73251406

我已经忘记我是不是从这个博主的那里找到的解决kindeditor粘贴图片的方法了,因为上次处理这个问题已经快半年了.以下是正文

KindEditor4.1.10,使得他能够在Chrome和IE11中直接粘贴复制的图片(比如通过截图工具把图片直接保存在剪切板中),然后调用上传URL上传图片

方法,修改kindeditor.js中的代码:

在5825行附近大概是下面这个样子的:

1 K(doc.body).bind(‘paste‘, function (e) {  
2     if (self.pasteType === 0) {  
3         e.stop();  
4         return;  
5     }  

在第1行和第2行之间插入:

  1 //处理IE11,Chrome粘贴图片上传  
  2 function dopasteImg() {  
  3     //debugger;  
  4     var file = null;  
  5     if (window.clipboardData) {//ie  
  6   
  7         if (clipboardData.files && clipboardData.files.length)//IE11  
  8             file = clipboardData.files[0];  
  9         else if (!clipboardData.getData("text") && !clipboardData.getData("url")) {  
 10             alert("不能粘贴文件或图片,请使用IE11或者Chrome浏览器,或使用上传功能");  
 11             return true;  
 12         }  
 13     } else {  
 14         if (e.event.clipboardData.items)//chrome  
 15         for (var i = 0; i < e.event.clipboardData.items.length; i++) {  
 16             if (e.event.clipboardData.items[i].kind === "file") {  
 17                 file = e.event.clipboardData.items[i];  
 18                 break;  
 19             }  
 20         }  
 21         if (file == null) {  
 22   
 23             if (!e.event.clipboardData.getData("url") && !e.event.clipboardData.getData("text")) {  
 24                 alert("不能粘贴文件或图片,请使用IE11或者Chrome浏览器,或使用上传功能");  
 25                 return true;  
 26             }  
 27         }  
 28     }  
 29     if (file) {  
 30         if (!K.undef(self.allowImageUpload, true)) {  
 31             alert("编辑器禁止上传图片,请与有关人员联系!");  
 32             return true;  
 33         }  
 34         //获取File Blob  
 35         //debugger;  
 36         var blb;  
 37         if (file.getAsFile) {//Chrome  
 38             blb = file.getAsFile();  
 39             if (blb.size === 0) {  
 40                 alert("不能获取剪切板中的" + (file.type.indexOf("image/") === 0 ? "图像" : "文件")  
 41                           +"\n如果是从OutLook中复制的,请换其他程序,如Word");  
 42                 return true;  
 43             }  
 44             sendfile(blb, file.type);  
 45         } else {  
 46             var fr = new FileReader();  
 47             if (fr.readAsArrayBuffer) {//ie  
 48   
 49   
 50                 fr.onloadend = function (evt) {  
 51                     blb = evt.target.result;  
 52                     sendfile(blb, file.type);  
 53                 }  
 54   
 55                 fr.readAsArrayBuffer(file);  
 56             }  
 57         }  
 58         function sendfile(b, t) {  
 59               
 60             var xhr = new XMLHttpRequest();  
 61             var formData = new FormData();  
 62             var isImg = t.indexOf("image/") === 0;  
 63             //formData.append(‘imgFile‘, file,"untitled." + t.split(‘/‘)[1]);  
 64             //formData.append(‘imgFile‘, b);  
 65             var myBlob = new Blob([b], { "type": t });  
 66             formData.append(‘imgFile‘, myBlob, "untitled." + t.split(‘/‘)[1]);  
 67             //formData.append(‘imgFile‘, b);  
 68             formData.append(‘dir‘, isImg ? ‘image‘ : ‘file‘);  
 69             xhr.open(‘POST‘, self.uploadJson);  
 70             xhr.onreadystatechange = function () {  
 71                 if (xhr.readyState == 4&&xhr.status == 200) {  
 72                     // if (fn) {  
 73                     var data = _trim(xhr.responseText);  
 74                     //if (dataType == ‘json‘) {  
 75                     data = _json(data);  
 76                     if (data.error) {  
 77                         if (typeof ($) !== "undefined" && $.messager && $.messager.alert) {  
 78                             $.messager.alert(‘Error‘, data.message, ‘warning‘);  
 79   
 80                         } else {  
 81                             alert(data.message);  
 82                         }  
 83                     } else {  
 84                         //self.exec(‘insertimage‘, url, title, width, height, border, align);  
 85                         if(K.undef(self.formatUploadUrl, true))  
 86                             data.url =K.formatUrl(data.url, ‘absolute‘);  
 87                         self.exec(‘insertimage‘, data.url, "from clipboard", undefined, undefined, undefined, undefined);  
 88                     }  
 89                     //}  
 90                     // fn(data);  
 91                     // }  
 92                 }  
 93             }  
 94             xhr.send(formData);  
 95         }  
 96         return true;  
 97     }  
 98 }  
 99 //debugger;  
100 if (dopasteImg())  
101     e.stop();  
102       //处理粘贴结束5825  

亲测chrome有效

以上是关于KindEditor4.1.10,支持粘贴图片的主要内容,如果未能解决你的问题,请参考以下文章

让富文本编辑器支持复制doc中多张图片直接粘贴上传

QT读取剪切板内容-实现复制粘贴文本和图片

kindeditor富文本编辑器支持从word复制粘贴保留格式和图片的插件

富文本编辑器xheditor支持从word复制粘贴保留格式和图片的插件

百度富文本编辑器支持从word复制粘贴保留格式和图片的插件

QT读取剪切板内容-实现复制粘贴文本和图片