原理: 监听粘贴事件(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. 启动windows服务的bat文件编写格式

    1.bat文件需要和bin文件内容放在一起 启动服务的bat文件如下: sc create 邮件服务 binPath= "%~dp0可执行文件名称.exe" start= auto ...

  2. (转)Java DecimalFormat 用法(数字格式化)

    我们经常要将数字进行格式化,比如取2位小数,这是最常见的.Java 提供 DecimalFormat 类,帮你用最快的速度将数字格式化为你需要的样子.下面是常用的例子: import java.tex ...

  3. Net Core MVC6 RC2 启动过程分析

    入口程序 如果做过Web之外开发的人,应该记得这个是标准的Console或者Winform的入口.为什么会这样呢?.NET Web Development and Tools Blog ASP.NET ...

  4. Jenkins 持续集成配置

    Jenkins搭建.NET自动编译测试与发布环境 Jenkins之Deploy部署(包括站点和类库项目) * 续篇--TFS+MSbuild+jenkins 实现 持续集成+自动部署到WEB网站 Je ...

  5. scrollend,滚动结束执行一次

    var timer;window.onscroll = function () { clearTimeout(timer); timer = setTimeout(function () { aler ...

  6. (2.5)Mysql之SQL基础——数据类型

    (2.5)Mysql之SQL基础——数据类型 关键词:mysql数据类型 目录: 一.整数型 二.小数型(以下均不能使用无符号) 三.日期时间型 四.字符串型 一.整数型 额外参数示例: int [( ...

  7. Wilcoxon符号秩+秩和检验学习[转载]

    参数检验就是已知数据的精确分布模型,根据数据来求出模型中的未知参数:而非参数检验就是无需对样本总体分布(比如满足正态分布)做出假设. 1.符号检验 转自:https://baike.baidu.com ...

  8. python全栈开发从入门到放弃之内置函数

    1.locals.globals def func(): x = 1 y = 2 print(locals()) #打印局部作用域中的名字 print(globals()) #打印全局作用域中的名字 ...

  9. Delphi APP 開發入門(九)拍照與分享

    Delphi APP 開發入門(九)拍照與分享 分享: Share on facebookShare on twitterShare on google_plusone_share   閲讀次數:30 ...

  10. WEB前端研发工程师编程能力成长之路(2)

    四.[入微] 最强解决方案.你能够走在需求的前面,将当前需求里有的.没有直接提出来的.现在暂时没有但将来可能有的等等,及前端编程潜规则等各个方方面面都综合考虑,给出最优方案.以一招胜万招. var s ...