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

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

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

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

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

 K(doc.body).bind('paste', function (e) {
if (self.pasteType === 0) {
e.stop();
return;
}

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

 //处理IE11,Chrome粘贴图片上传
function dopasteImg() {
//debugger;
var file = null;
if (window.clipboardData) {//ie if (clipboardData.files && clipboardData.files.length)//IE11
file = clipboardData.files[0];
else if (!clipboardData.getData("text") && !clipboardData.getData("url")) {
alert("不能粘贴文件或图片,请使用IE11或者Chrome浏览器,或使用上传功能");
return true;
}
} else {
if (e.event.clipboardData.items)//chrome
for (var i = 0; i < e.event.clipboardData.items.length; i++) {
if (e.event.clipboardData.items[i].kind === "file") {
file = e.event.clipboardData.items[i];
break;
}
}
if (file == null) { if (!e.event.clipboardData.getData("url") && !e.event.clipboardData.getData("text")) {
alert("不能粘贴文件或图片,请使用IE11或者Chrome浏览器,或使用上传功能");
return true;
}
}
}
if (file) {
if (!K.undef(self.allowImageUpload, true)) {
alert("编辑器禁止上传图片,请与有关人员联系!");
return true;
}
//获取File Blob
//debugger;
var blb;
if (file.getAsFile) {//Chrome
blb = file.getAsFile();
if (blb.size === 0) {
alert("不能获取剪切板中的" + (file.type.indexOf("image/") === 0 ? "图像" : "文件")
+"\n如果是从OutLook中复制的,请换其他程序,如Word");
return true;
}
sendfile(blb, file.type);
} else {
var fr = new FileReader();
if (fr.readAsArrayBuffer) {//ie fr.onloadend = function (evt) {
blb = evt.target.result;
sendfile(blb, file.type);
} fr.readAsArrayBuffer(file);
}
}
function sendfile(b, t) { var xhr = new XMLHttpRequest();
var formData = new FormData();
var isImg = t.indexOf("image/") === 0;
//formData.append('imgFile', file,"untitled." + t.split('/')[1]);
//formData.append('imgFile', b);
var myBlob = new Blob([b], { "type": t });
formData.append('imgFile', myBlob, "untitled." + t.split('/')[1]);
//formData.append('imgFile', b);
formData.append('dir', isImg ? 'image' : 'file');
xhr.open('POST', self.uploadJson);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4&&xhr.status == 200) {
// if (fn) {
var data = _trim(xhr.responseText);
//if (dataType == 'json') {
data = _json(data);
if (data.error) {
if (typeof ($) !== "undefined" && $.messager && $.messager.alert) {
$.messager.alert('Error', data.message, 'warning'); } else {
alert(data.message);
}
} else {
//self.exec('insertimage', url, title, width, height, border, align);
if(K.undef(self.formatUploadUrl, true))
data.url =K.formatUrl(data.url, 'absolute');
self.exec('insertimage', data.url, "from clipboard", undefined, undefined, undefined, undefined);
}
//}
// fn(data);
// }
}
}
xhr.send(formData);
}
return true;
}
}
//debugger;
if (dopasteImg())
e.stop();
//处理粘贴结束5825

亲测chrome有效,如果你的tomcat配置了去除项目名之类的,那么可能就无法粘贴图片了

KindEditor4.1.10,支持粘贴图片的更多相关文章

  1. KindEditor4.1.10,支持粘贴图片(转载!)

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

  2. kindeditor-4.1.10 结合 Asp.Net MVC 添加图片功能

    KindEditor是一套开源的HTML可视化编辑器,现在我要结合Asp.Net MVC4 上传图片功能,做相应的配置和修改, 其实网上也有人写过类似的文章了,我写出来是以防以后使用的时候出现这样的问 ...

  3. 让input支持 ctrl v上传粘贴图片? 让input支持QQ截图或剪切板中的图像数据(Java实现保存)

    原理:监听粘贴 → 获取粘贴内容 → 将内容上传 → 抓取后返回替换至input 我们在生产中用到的界面: 测试地址 http://sms.reyo.cn 用户名:aa 密码:123456 以下是PH ...

  4. Ckeditor 中粘贴图片

    我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片. 这里我们实现主要是获取对应的粘贴事件. CKEDITOR.instances[&quo ...

  5. WORD粘贴图片+DEDE

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  6. ckeditor从word粘贴图片

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  7. ckeditor直接粘贴图片实现

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  8. ckeditor实现WORD粘贴图片自动上传,jsp应用

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  9. ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

随机推荐

  1. springboot整合freemarker(转)

    添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp ...

  2. 很安逸的离线API文档查询工具Dash和Zeal

    大家开发的时候难免会查询一些文档,看一下API的调用方法等,所以会不同的语言去某一个地方去找,确实很麻烦,今天给大家安逸两款软件,肯定会让你爱不释手! Dash for macOS 官方地址:http ...

  3. [D3] Build a Scatter Plot with D3 v4

    Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They ...

  4. python中如何在一张图上画两条折线

    摘自:https://segmentfault.com/q/1010000002760775

  5. 如何启用“锁定内存页”选项 (Windows)

    默认情况下,禁用 Windows 策略"锁定内存页"选项.必须启用此权限才能配置地址窗口化扩展插件 (AWE).此策略将确定哪些帐户可以使用进程将数据保留在物理内存中,从而阻止系统 ...

  6. 【BZOJ 3238】[Ahoi2013]差异

    [链接]h在这里写链接 [题意]     还有更简洁的题目描述吗/xk [题解]     对于lenti+lentj这一部分,比较好处理.     可以弄一个前缀和.     然后O(N)扫描一遍. ...

  7. [Ramda] Pluck & Props: Get the prop(s) from object array

    Pluck: Get one prop from the object array: R.pluck(}, {a: }]); //=> [1, 2] R.pluck()([[, ], [, ]] ...

  8. 机器学习算法笔记1_2:分类和逻辑回归(Classification and Logistic regression)

    形式: 採用sigmoid函数: g(z)=11+e−z 其导数为g′(z)=(1−g(z))g(z) 如果: 即: 若有m个样本,则似然函数形式是: 对数形式: 採用梯度上升法求其最大值 求导: 更 ...

  9. 黑马day18 jquery高级特性&amp;Ajax的load方法

    介绍jquery中的load方法: (1).前面没有jquery.修饰,能够判断出他是一个普通的非全局函数(也就是说是一个局部函数):$.,$().,jquery.等修饰的就是全局函数.没有这些修饰的 ...

  10. HDU1248 寒冰王座 【数学题】or【全然背包】

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...