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编辑器(富文本编辑器) ...
随机推荐
- 洛谷 P2969 [USACO09DEC]音符Music Notes
P2969 [USACO09DEC]音符Music Notes 题目描述 FJ is going to teach his cows how to play a song. The song cons ...
- STL之vector容器的实现框架
说明:本文仅供学习交流,转载请标明出处,欢迎转载. 实现vector容器的思路等同于实现一个动态数组,以下我们參照源代码的相关资料,给出一个vector容器的大致框架,仅仅有声明,没给出详细的实现. ...
- Project Euler 516 5-smooth totients (数论)
题目链接: https://projecteuler.net/problem=516 题目: \(5\)-smooth numbers are numbers whose largest prime ...
- ds1302模块的一个arduino程序
/* * 读写DS1302 时钟芯片 * @author Yangtf * 很棒的文档 http://www.21ic.com/jichuzhishi/datasheet/DS1302/data/18 ...
- JS学习笔记 - 面向对象 - 选项卡 (普通选项卡改写)
选项卡3 <script> window.onload=function () { new TabSwitch('div1'); }; function TabSwitch(id) // ...
- [NodeJS] Use Secrets When Deploying Applications with Now
Applications require a lot of sensitive information. Database passwords, API keys and secrets used f ...
- C语言深度剖析-----内存管理的艺术
动态内存分配 为什么使用动态内存分配 例:记录卖出的商品 卖出商品最多只能记录1000个 两种改进的方法 都需要动态内存分配 第二种方法需要重置内存 calloc和realloc realloc重置内 ...
- struts2注入类
struts2是能够注入一个对象的,那么一定须要继承ModelDriven的泛型接口. package com.test.action; import com.opensymphony.xwork2. ...
- leetcode-combination sum and combination sum II
Combination sum: Given a set of candidate numbers (C) and a target number (T), find all unique combi ...
- js和jquery实现页面滚动监听
js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...