原理: 监听粘贴事件(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. Servlet------>jsp输出JavaBean

    JavaBean是遵循特殊写法的java类 它通常具有如下特点: 1.这个java类必须具有一个无参的构造函数 2.属性必须私有化 3.私有化必须通过public类暴露给其他程序,而且方法的命名必须遵 ...

  2. POJ3660 传递闭包———floyd算法

    POJ3660 Cow Contest 题目链接:http://poj.org/problem?id=3660 题意:农名约翰有些奶牛,约翰通过让他们决斗来决定他们的排名,约翰让这些奶牛一对一打完一定 ...

  3. iOS 9 配置HTTP

    <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key ...

  4. 前端开发 - HTML - 简介

    一.web1.0时代的网页制作 静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为"牛皮癣"网页.例如一篇QQ日志.一篇博文等展示性文章. 网页三剑 ...

  5. mapjoin与reducejoin

    一.mapjoin 1.Mapper类 package com.css.mapjoin; import java.io.BufferedReader; import java.io.FileInput ...

  6. 10张Gif动图让你弄懂递归等概念

    图像(包括动图)是传递信息的一种高效方式,往往能增强表象.记忆与思维等方面的反应强度.所谓一图胜千言,说的就是这个道理. 今天为大家整理了十张动图GIFS,有助于认识循环.递归.二分检索等概念的具体运 ...

  7. c#中params关键字应用

    c#params应用 params 是C#开发语言中关键字, params主要的用处是在给函数传参数的时候用,就是当函数的参数不固定的时候. 在方法声明中的 params 关键字之后不允许任何其他参数 ...

  8. Mysql数据库常用操作语句大全

    零.用户管理: 1.新建用户: >CREATE USER name IDENTIFIED BY 'ssapdrow'; 2.更改密码: >SET PASSWORD FOR name=PAS ...

  9. python学习笔记(二)文件操作和集合

    集合: 集合也是一种数据类型,一个类似列表东西,它的特点是无序的,不重复的,也就是说集合中是没有重复的数据 集合的作用: 1.它可以把一个列表中重复的数据去掉,而不需要你再写判断 2.可以做关系测试, ...

  10. .globl分析

    Uboot中常看到.globl .globl _start _start: b reset .align .globl _TEXT_BASE _TEXT_BASE: .globl _start  /* ...