原理: 监听粘贴事件(paste) 获取粘贴版数据,读取到图片数据流进行加载base64 传到后台服务端直接输出为图片文件保存后返回图片读取路径插入编辑器中

    /**
* 获取编辑器对象
*/
window.$KindEditor = KindEditor.create('#submit_editor', {
width : $("#submit_editor").width(),
height: $("#submit_editor").height(),
cssPath : contextPath + "/static/plugin/kindeditor/plugins/code/prettify.css",
uploadJson : contextPath + "/static/plugin/kindeditor/jsp/upload_json.jsp",
fileManagerJson : contextPath + "/static/plugin/kindeditor/jsp/file_manager_json.jsp",
allowFileManager : true,
resizeType:0,//2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动
afterBlur:function(){
$KindEditor.sync("#submit_editor");
},
afterCreate:function(){
var doc = this.edit.doc;
var cmd = this.edit.cmd;
$(doc.body).bind('paste',function(ev){
var $this = $(this);
var dataItem = ev.originalEvent.clipboardData.items[0];
if(dataItem){
var file = dataItem.getAsFile();
if(file){
var reader = new FileReader();
reader.onload = function(evt) {
var imageDataBase64 = evt.target.result;
$.post(contextPath + "/imgUpload/base64.action",{"imageDataBase64":imageDataBase64},function(resp){
var respData = resp;
if(respData.errCode == 0){
var html = '<img src="' + respData.result + '" alt="" />';
cmd.inserthtml(html);
}
});
};
reader.readAsDataURL(file);
}
}
});
} });
window.prettyPrint();
package com.innopro.sp.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random; import javax.servlet.http.HttpServletResponse; import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod; import sun.misc.BASE64Decoder; import com.busp.common.base.exception.ErrorCode;
import com.busp.common.base.model.ResultVo;
import com.busp.common.util.string.StringUtil;
import com.innopro.sp.common.Constants; /**
* @ClassName: LoginController
* @version 2.0
* @Desc: 图片上传控制器
* @date 2017年5月23日上午10:47:43
* @history v2.0
*
*/
@Controller
public class ImageUploadController extends BaseController{ private Logger logger = Logger.getLogger(ImageUploadController.class); public final String IMAGETYPES = "gif,jpg,jpeg,png,bmp"; /**
* 描述:kindeditor 粘贴图片上传
* @author Jack
* @date 2017年5月23日上午11:04:16
* @return
*/
@RequestMapping(value = "/imgUpload/base64", method = RequestMethod.POST)
public void imageUploadBase64(HttpServletResponse response) {
@SuppressWarnings("unchecked")
ResultVo<String> resultVo = ResultVo.getInance();
try{
String imgageFilePath = null;
String imageDataBase64 = getRequest().getParameter("imageDataBase64");
if(!StringUtil.isEmpty(imageDataBase64)){
String[] arrImageData = imageDataBase64.split(",");
String[] arrTypes = arrImageData[0].split(";");
String[] arrImageType = arrTypes[0].split(":");
String imageType = arrImageType[1];
String imageTypeSuffix = imageType.split("/")[1];
if("base64".equalsIgnoreCase(arrTypes[1])&&this.IMAGETYPES.indexOf(imageTypeSuffix.toLowerCase())!=-1){
BASE64Decoder decoder = new BASE64Decoder();
byte[] decodeBuffer = decoder.decodeBuffer(arrImageData[1]);
SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");
String currFormat = df.format(new Date());
File currFileBag = new File(Constants.ATTACHED_PATH +currFormat);
if(!currFileBag.exists()){
currFileBag.mkdirs();
}
imgageFilePath = currFormat+"/"+new Random().nextInt(100000) + "." + imageTypeSuffix;
File currFile = new File(Constants.ATTACHED_PATH +imgageFilePath);
int i = 0;
while(currFile.exists()){
imgageFilePath = currFormat+"/"+new Random().nextInt(100000) + "." + imageTypeSuffix;
currFile = new File(Constants.ATTACHED_PATH +imgageFilePath);
i++;
if(i>=100000){
imgageFilePath = null;
currFile = null;
break;
}
}
if(currFile!=null){
OutputStream out = new FileOutputStream(currFile);
out.write(decodeBuffer);
out.flush();
out.close();
}
}
}
//imgageFilePath路径存在表示上传成功
if(imgageFilePath!=null){
resultVo.setResult(Constants.ATTACHED_URL +imgageFilePath);
}else{
logger.error("上传图片发生未知异常....");
resultVo.setErrCode(ErrorCode.SYS_ERROR_COMMON_CODE);
resultVo.setErrMsg(ErrorCode.SYS_ERROR_COMMON_MSG);
}
}catch(Exception e){
logger.error("上传图片发生异常: ", e);
resultVo.setErrCode(ErrorCode.SYS_ERROR_COMMON_CODE);
resultVo.setErrMsg(ErrorCode.SYS_ERROR_COMMON_MSG);
}
outJSONData(resultVo,response);
} }
Constants.ATTACHED_URL :项目访问图片路径
Constants.ATTACHED_PATH :图片保存路径
 

KindEditor ctrl+v添加图片功能的更多相关文章

  1. js实现ctrl+v粘贴图片或是截图

    浏览器环境:谷歌浏览器 1.ctrl+v粘贴图片都是监听paste时间实现的,复制的数据都存在clipboardData下面,虽然打印显示数据长度为0,但是还是可以获取数据的 2.打印clipboar ...

  2. 为Kindeditor控件添加图片自动上传功能

    Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官 ...

  3. [转]为Kindeditor控件添加图片自动上传功能

    原文地址:http://www.cnblogs.com/jaxu/p/3824583.html Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaSc ...

  4. Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能

    当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...

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

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

  6. 扩展ExtJs 4.2.1 htmleditor 添加图片功能

    做项目的时候遇到这样一个问题,因为我是用ExtJs做的后台管理框架,所以当我使用ExtJs htmleditor 控件 的时候,发现没有图片上传的功能,于是我打算在网上找找有关的文章,居然真有人写过, ...

  7. ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

    公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...

  8. js ctrl+v实现图片粘贴

    <script> // demo 程序将粘贴事件绑定到 document 上 document.addEventListener("paste", function ( ...

  9. C# 控制台程序实现 Ctrl + V 粘贴功能

    代码主要分为两部分,首先调用系统API注册剪切板相关的事件,然后监控用户的按键操作.完整代码如下: class ClipBoard { [DllImport("user32.dll" ...

随机推荐

  1. 【react读取文件】react发送GET请求读取静态文件

    react中,使用发送请求的方式把static文件夹中的前端可访问的静态文件读取成字符串: 1.new request,需要用到getRequestHeaders组件 2.fetch获取respons ...

  2. web前端 微信支付之H5支付

    一.什么是微信H5支付? 微信,简直是21世纪的社交产品之最.人们的生活已经离不开它,因为它的触角广泛蔓延像一张巨大无形的网,从而让我们的生活更加便捷高效,这款社交工具我们不做过多评价,但是我们要通过 ...

  3. 调试maven源代码

    下载源代码,导入idea 运行MavenCli ,设置vm参数 -Dclassworlds.conf=/Users/fsq/Downloads/apache-maven-3.6.2.0/bin/m2. ...

  4. pendingIntent的FLAG标签:

    PendingIntent是一个特殊的Intent,实际上它像一个邮包,其中包裹着真正的Intent,当邮包未打开时,Intent是被“挂起”的,所以并不执行, 只有当邮包拆开时才会执行.它与Inte ...

  5. (3.10)常用知识-T-SQL优化

    关键字:SQL优化 总结: 1.书写问题 2.表连接方式 3.索引的抉择 4.执行计划之参数嗅探,使用提示强制执行计划 5.子查询与表连接的效率 6.临时表.CTE.表变量的选择 7.常用sp与sel ...

  6. 【Spring Task】定时任务详解实例-@Scheduled

    Spring的任务调度,采用注解的形式 spring的配置文件如下,先扫描到任务的类,打开spirng任务的标签 <beans xmlns="http://www.springfram ...

  7. Java利用BufferedWriter写文本文件

    在本地写入保存的操作, 很多时候我们习惯使用Outputstream, 而其实写文本文件的时候, Java提供一个很好的工具给我们 ----- writer. 由于它是针对文本类型的文件操作, 所以如 ...

  8. wordpress 自己制作子主题 child theme

    使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题 在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一 ...

  9. MBR和GPT(分区)

    MBR:Master Boot Record GPT:Guid Partition Table (全局唯一标识符分区表) GPT is the new standard and is graduall ...

  10. 详解MySQL第三篇—DCL语句

    DCL(Data Control Language)语句:数据控制语句,用于控制不同数据段直接的许可和访问级别的语句.这些语句定义了数据库.表.字段.用户的访问权限和安全级别.主要的语句关键字包括 g ...