正文

kindeditor4.1.10,支持粘贴图片(代码片段)

codeneverlies  codeneverlies  2022-11-09  541

关键词：

转载自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有效

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

...要将图片转换成base64后就可以直接使用（IE8及一下可能不支持），由于编查看详情

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

很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc来快速实现这个word粘贴到富文本... 查看详情

ckeditor粘贴图片上传功能

Chrome+IE默认支持粘贴剪切板中的图片，但是我要发布的文章存在word里面，图片多达数十张，我总不能一张一张复制吧？Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

关于xheditor粘贴图片自动上传

关于umeditor粘贴图片自动上传

kindeditor等在线编辑器是怎么实现支持word的粘贴的?

...要将图片转换成base64后就可以直接使用（IE8及一下可能不支持），由于编查看详情

百度编辑器直接粘贴图片实现

kindeditor图片粘贴上传(chrome)

...下kindeditor，一个十分强大的国产开源web-editor组件。 kindeditor4.1.x版本已支持图片批量上传，不过传统的选文件上传的方式依然效率低下。很多时候，编辑人员可能需要将一个文档中图片上传到网上，那么，按照传统的上传方... 查看详情

网页截图粘贴上传

...端时我使用的uikit，但uikit里面的htmleditor插件对图片上传支持太差，仅仅好放弃。又去看了其它网页编辑控件，但发现这些控件处理图片的方式都是选择网络上图片或者从本地上传的，这对发表文章博客之类的还好。可是对于我... 查看详情

如何将word图片粘贴到富文本编辑器里面

...如果语言不通得自己做Base64编码解码）因为公司业务需要支持IE8，网上其实有很多富文本框，效果都很好。例如www.wangEditor.com 但试了一圈都不支持IE8。所以回到Ueditor，由于官方没有维查看详情

帝国cms从word复制粘贴公式

支持鼠标滚轮图片自适应的焦点图代码等

支持鼠标滚轮图片自适应的焦点图代码支持鼠标滚轮图片自适应的焦点图代码，纯JS构建，可用键盘左右键切换图片，倒序回滚，另外鼠标停止响应后可自动播放功能，兼容主流浏览器，懒人图库推荐下载！使用方法：1... 查看详情

怎么实现将word中的公式导入（或粘贴）到编辑中ckeditor

用java编写一个图片浏览器

功能要求：图片显示图片分类管理支持图片的编辑操作：复制、粘贴、缩放支持多个图片连续播放参考技术A这个东西可不只十分。参考技术B哈哈。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。... 查看详情

树莓派3代支持多大的sd卡?

我今天想买树莓派3代，请问它支持最大多少G的SD卡啊？最低速度要CLASS几？CLASS4以上最好，卡的速度直接影响体验，大约16GB足够了，支持外界硬盘。纯手打望采纳随意追问参考技术A128G都有人上过，但不是所有的卡都可以。http:/... 查看详情

ckeditor中粘贴图片

...这种手动上传图片方式并不是很方便，而是复制或者截图粘贴图片。这里我们实现主要是获取对应的粘贴事件。CKEDITOR.instances["editor1"].on(‘instanceReady‘,function(e)this.document.on("paste",function(e)varitems=e.data.$.clip 查看详情

博客图片点击放大

1.进入博客，点击管理——》设置——》申请支持JS代码权限； 2.支持JS代码后，在页脚Html代码中粘贴如下代码：<divid="shadediv"style="display:none;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;backgroun 查看详情

ckeditor粘贴有图片不显示

使用ckeditor粘贴word文档，应为文档里面有图片，图片不显示。怎么让它显示出来？参考技术A可以用图片导入的方式你的图片先保存到JPG然后在word选择添加剪贴画-选择来自文件找到你的图片就得了查看详情