KindEditor4.1.10,支持粘贴图片
转载自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,支持粘贴图片的更多相关文章
- KindEditor4.1.10,支持粘贴图片(转载!)
本人扩展了KindEditor4.1.10,使得他能够在Chrome和IE11中直接粘贴复制的图片(比如通过截图工具把图片直接保存在剪切板中),然后调用上传URL上传图片 方法,修改kindedito ...
- kindeditor-4.1.10 结合 Asp.Net MVC 添加图片功能
KindEditor是一套开源的HTML可视化编辑器,现在我要结合Asp.Net MVC4 上传图片功能,做相应的配置和修改, 其实网上也有人写过类似的文章了,我写出来是以防以后使用的时候出现这样的问 ...
- 让input支持 ctrl v上传粘贴图片? 让input支持QQ截图或剪切板中的图像数据(Java实现保存)
原理:监听粘贴 → 获取粘贴内容 → 将内容上传 → 抓取后返回替换至input 我们在生产中用到的界面: 测试地址 http://sms.reyo.cn 用户名:aa 密码:123456 以下是PH ...
- Ckeditor 中粘贴图片
我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片. 这里我们实现主要是获取对应的粘贴事件. CKEDITOR.instances[&quo ...
- WORD粘贴图片+DEDE
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- ckeditor从word粘贴图片
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- ckeditor直接粘贴图片实现
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- ckeditor实现WORD粘贴图片自动上传,jsp应用
官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...
- ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
随机推荐
- amazeui学习笔记--js插件(UI增强)--警告框Alert
amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...
- amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- 微服务实战(四):服务发现的可行方案以及实践案例 - DockOne.io
原文:微服务实战(四):服务发现的可行方案以及实践案例 - DockOne.io 这是关于使用微服务架构创建应用系列的第四篇文章.第一篇介绍了微服务架构的模式,讨论了使用微服务架构的优缺点.第二和第三 ...
- TCP快速重传与快速恢复原理分析(四种不同的算法)
在TCP/IP中,快速重传和恢复(fast retransmit and recovery,FRR)是一种拥塞控制算法,它能快速恢复丢失的数据包.没有FRR,如果数据包丢失了,TCP将会使用定时器来要 ...
- windows下, nginx 提示错误 "No input file specified"
https://blog.csdn.net/m_nanle_xiaobudiu/article/details/80386035
- 【例题5-7 UVA - 136】Ugly Numbers
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每个丑数x,都能生成3个丑数2x,3x,5x 则我们以1作为起点. 生成丑数. 每次取出set里面最小的那个数. 然后用它去生成其他 ...
- Android中ImageView.ScaleType属性值
1 android:scaleType="center" (1)当图片大于ImageView的宽高:以图片的中心点和ImageView的中心点为基准,按照图片的原大小居中显示,不缩 ...
- [转]在Win7 64位注册ActiveX控件
原文作者: K_H_H 原文地址: http://blog.sina.com.cn/s/blog_56b96c5a0100ztc7.html 首先必须以管理员身份运行cmd.exe,即在cmd.ex ...
- 问题:CListCtrl如何高亮选中一行 http://zhidao.baidu.com/question/100664911.html 扩展:单行、双行及完成状态的字体等等。。。
http://zhidao.baidu.com/link?url=BKp05mfOdKbEBh21svQelpVhYjzDkIpYUZay8_3ZLSndTQn5kK0eTwQG8jBvYnwh8US ...
- 如何调试Javascript代码
转自原文如何调试Javascript代码 目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法 ...