KindEditor ctrl+v添加图片功能
原理: 监听粘贴事件(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添加图片功能的更多相关文章
- js实现ctrl+v粘贴图片或是截图
浏览器环境:谷歌浏览器 1.ctrl+v粘贴图片都是监听paste时间实现的,复制的数据都存在clipboardData下面,虽然打印显示数据长度为0,但是还是可以获取数据的 2.打印clipboar ...
- 为Kindeditor控件添加图片自动上传功能
Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官 ...
- [转]为Kindeditor控件添加图片自动上传功能
原文地址:http://www.cnblogs.com/jaxu/p/3824583.html Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaSc ...
- Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能
当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...
- kindeditor-4.1.10 结合 Asp.Net MVC 添加图片功能
KindEditor是一套开源的HTML可视化编辑器,现在我要结合Asp.Net MVC4 上传图片功能,做相应的配置和修改, 其实网上也有人写过类似的文章了,我写出来是以防以后使用的时候出现这样的问 ...
- 扩展ExtJs 4.2.1 htmleditor 添加图片功能
做项目的时候遇到这样一个问题,因为我是用ExtJs做的后台管理框架,所以当我使用ExtJs htmleditor 控件 的时候,发现没有图片上传的功能,于是我打算在网上找找有关的文章,居然真有人写过, ...
- ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...
- js ctrl+v实现图片粘贴
<script> // demo 程序将粘贴事件绑定到 document 上 document.addEventListener("paste", function ( ...
- C# 控制台程序实现 Ctrl + V 粘贴功能
代码主要分为两部分,首先调用系统API注册剪切板相关的事件,然后监控用户的按键操作.完整代码如下: class ClipBoard { [DllImport("user32.dll" ...
随机推荐
- java讲讲几种常见的排序算法(二)
java讲讲几种常见的排序算法(二) 目录 java讲讲几种常见的排序算法(一) java讲讲几种常见的排序算法(二) 堆排序 思路:构建一个小顶堆,小顶堆就是棵二叉树,他的左右孩子均大于他的根节点( ...
- 用于把List<Object>转换成Map<String,Object>形式
/** * 用于把List<Object>转换成Map<String,Object>形式,便于存入缓存 * @author zhang_bo * @param keyName ...
- Mad Counting---LightOJ1148(好任性的过了)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1148 已知有n个人,并且每个人都知道除自己之外还有m个人与自己支持的队一样,让我们求至 ...
- nginx 哈希表结构图
- Shiro框架简介
Apache Shiro是Java的一个安全框架.对比另一个安全框架Spring Sercurity,它更简单和灵活. Shiro可以帮助我们完成:认证.授权.加密.会话管理.Web集成.缓存等. A ...
- Spark2.0机器学习系列之5:随机森林
概述 随机森林是决策树的组合算法,基础是决策树,关于决策树和Spark2.0中的代码设计可以参考本人另外一篇博客: http://www.cnblogs.com/itboys/p/8312894.ht ...
- vue的项目结构
一. 准备工作 1. 初始化项目 vue init webpack itany cd itany cnpm install cnpm install less less-loa ...
- 史上最有魄力公司!20亿主要用于团队建设,要在上海做出一家BAT之外的互联网公司
在去年的创业大军里,有一家公司显得很特别——微鲸科技,背靠华人文化,联合阿里巴巴.腾讯和央广,天使轮就高达20亿,是被誉为互联网电视领域的豪华创业团队. 在上市不到半年的时间里,旗下发布的55吋和43 ...
- Linux服务器上监控网络带宽命令
本文介绍了一些可以用来监控网络使用情况的Linux命令行工具.这些工具可以监控通过网络接口传输的数据,并测量目前哪些数据所传输的速度.入站流量和出站流量分开来显示. 一些命令可以显示单个进程所使用的带 ...
- Linux服务器access_log日志分析及配置详解(一)
nginx的log日志分为access log 和 error log 其中access log 记录了哪些用户,哪些页面以及用户浏览器.ip和其他的访问信息 error log 则是记录服务器错误日 ...