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,支持粘贴图片的主要内容,如果未能解决你的问题,请参考以下文章
kindeditor富文本编辑器支持从word复制粘贴保留格式和图片的插件