原理: 监听粘贴事件(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. linLINUX中常用操作命令

    LINUX中常用操作命令 Linux简介及Ubuntu安装 常见指令 系统管理命令 打包压缩相关命令 关机/重启机器 Linux管道 Linux软件包管理 vim使用 用户及用户组管理 文件权限管理 ...

  2. No such file or directory

    项目-targets-build phases, 然后从copy bundle resources里面删掉红色的错误资源文件

  3. make_ext4fs 失败

    root@fengyun-server:/home/fmake_ext4fsengyun/android/reverse_engineer/rom制作# ./make_ext4fs -l 700M - ...

  4. PXE,ipmi,bare metal

    IPMI(Intelligent Platform Management Interface)是一个智能平台管理接口. 用户可以利用IPMI 监视服务器等设备的物理特征,如各部件的温度.电压.风扇工作 ...

  5. Python中的Numpy

    引用Numpy import numpy as np 生成随机数据 # 200支股票 stock_cnt = 200 # 504个交易日 view_days = 504 # 生成服从正态分布:均值期望 ...

  6. LeetCode—Unique Paths

    题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...

  7. 【我的Android进阶之旅】快速创建和根据不同的版本类型(Dev、Beta、Release)发布Android 开发库到Maven私服

    前言 由于项目越来越多,有很多公共的代码都可以抽取出一个开发库出来传到公司搭建好的Maven私服,以供大家使用. 之前搭建的Maven仓库只有Release和Snapshot两个仓库,最近由于开发库有 ...

  8. celery-rabbitmq 安装部署

    一:Python安装 1.下载python3源码 wget https://www.python.org/ftp/python/3.5.0/Python-3.5.0.tgz 2.解压 tar xf P ...

  9. php about session store db or cache

    PHP关于Session的配置: 在php.ini中配置为:session.name = PHPSESSID 在请求开始的时候,会话名称会被重置并存储到session.name配置项. 所以要想在不改 ...

  10. python3 爬虫之Pyquery的使用方法

    安装 pip install pyquery 官方文档: https://pythonhosted.org/pyquery/ 初始化方式(四种) 1. 直接字符串 from pyquery impor ...