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

  1. /**
  2. * 获取编辑器对象
  3. */
  4. window.$KindEditor = KindEditor.create('#submit_editor', {
  5. width : $("#submit_editor").width(),
  6. height: $("#submit_editor").height(),
  7. cssPath : contextPath + "/static/plugin/kindeditor/plugins/code/prettify.css",
  8. uploadJson : contextPath + "/static/plugin/kindeditor/jsp/upload_json.jsp",
  9. fileManagerJson : contextPath + "/static/plugin/kindeditor/jsp/file_manager_json.jsp",
  10. allowFileManager : true,
  11. resizeType:0,//2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动
  12. afterBlur:function(){
  13. $KindEditor.sync("#submit_editor");
  14. },
  15. afterCreate:function(){
  16. var doc = this.edit.doc;
  17. var cmd = this.edit.cmd;
  18. $(doc.body).bind('paste',function(ev){
  19. var $this = $(this);
  20. var dataItem = ev.originalEvent.clipboardData.items[0];
  21. if(dataItem){
  22. var file = dataItem.getAsFile();
  23. if(file){
  24. var reader = new FileReader();
  25. reader.onload = function(evt) {
  26. var imageDataBase64 = evt.target.result;
  27. $.post(contextPath + "/imgUpload/base64.action",{"imageDataBase64":imageDataBase64},function(resp){
  28. var respData = resp;
  29. if(respData.errCode == 0){
  30. var html = '<img src="' + respData.result + '" alt="" />';
  31. cmd.inserthtml(html);
  32. }
  33. });
  34. };
  35. reader.readAsDataURL(file);
  36. }
  37. }
  38. });
  39. }
  40.  
  41. });
  42. window.prettyPrint();
  1. package com.innopro.sp.controller;
  2.  
  3. import java.io.File;
  4. import java.io.FileOutputStream;
  5. import java.io.OutputStream;
  6. import java.text.SimpleDateFormat;
  7. import java.util.Date;
  8. import java.util.Random;
  9.  
  10. import javax.servlet.http.HttpServletResponse;
  11.  
  12. import org.apache.log4j.Logger;
  13. import org.springframework.stereotype.Controller;
  14. import org.springframework.web.bind.annotation.RequestMapping;
  15. import org.springframework.web.bind.annotation.RequestMethod;
  16.  
  17. import sun.misc.BASE64Decoder;
  18.  
  19. import com.busp.common.base.exception.ErrorCode;
  20. import com.busp.common.base.model.ResultVo;
  21. import com.busp.common.util.string.StringUtil;
  22. import com.innopro.sp.common.Constants;
  23.  
  24. /**
  25. * @ClassName: LoginController
  26. * @version 2.0
  27. * @Desc: 图片上传控制器
  28. * @date 2017年5月23日上午10:47:43
  29. * @history v2.0
  30. *
  31. */
  32. @Controller
  33. public class ImageUploadController extends BaseController{
  34.  
  35. private Logger logger = Logger.getLogger(ImageUploadController.class);
  36.  
  37. public final String IMAGETYPES = "gif,jpg,jpeg,png,bmp";
  38.  
  39. /**
  40. * 描述:kindeditor 粘贴图片上传
  41. * @author Jack
  42. * @date 2017年5月23日上午11:04:16
  43. * @return
  44. */
  45. @RequestMapping(value = "/imgUpload/base64", method = RequestMethod.POST)
  46. public void imageUploadBase64(HttpServletResponse response) {
  47. @SuppressWarnings("unchecked")
  48. ResultVo<String> resultVo = ResultVo.getInance();
  49. try{
  50. String imgageFilePath = null;
  51. String imageDataBase64 = getRequest().getParameter("imageDataBase64");
  52. if(!StringUtil.isEmpty(imageDataBase64)){
  53. String[] arrImageData = imageDataBase64.split(",");
  54. String[] arrTypes = arrImageData[0].split(";");
  55. String[] arrImageType = arrTypes[0].split(":");
  56. String imageType = arrImageType[1];
  57. String imageTypeSuffix = imageType.split("/")[1];
  58. if("base64".equalsIgnoreCase(arrTypes[1])&&this.IMAGETYPES.indexOf(imageTypeSuffix.toLowerCase())!=-1){
  59. BASE64Decoder decoder = new BASE64Decoder();
  60. byte[] decodeBuffer = decoder.decodeBuffer(arrImageData[1]);
  61. SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");
  62. String currFormat = df.format(new Date());
  63. File currFileBag = new File(Constants.ATTACHED_PATH +currFormat);
  64. if(!currFileBag.exists()){
  65. currFileBag.mkdirs();
  66. }
  67. imgageFilePath = currFormat+"/"+new Random().nextInt(100000) + "." + imageTypeSuffix;
  68. File currFile = new File(Constants.ATTACHED_PATH +imgageFilePath);
  69. int i = 0;
  70. while(currFile.exists()){
  71. imgageFilePath = currFormat+"/"+new Random().nextInt(100000) + "." + imageTypeSuffix;
  72. currFile = new File(Constants.ATTACHED_PATH +imgageFilePath);
  73. i++;
  74. if(i>=100000){
  75. imgageFilePath = null;
  76. currFile = null;
  77. break;
  78. }
  79. }
  80. if(currFile!=null){
  81. OutputStream out = new FileOutputStream(currFile);
  82. out.write(decodeBuffer);
  83. out.flush();
  84. out.close();
  85. }
  86. }
  87. }
  88. //imgageFilePath路径存在表示上传成功
  89. if(imgageFilePath!=null){
  90. resultVo.setResult(Constants.ATTACHED_URL +imgageFilePath);
  91. }else{
  92. logger.error("上传图片发生未知异常....");
  93. resultVo.setErrCode(ErrorCode.SYS_ERROR_COMMON_CODE);
  94. resultVo.setErrMsg(ErrorCode.SYS_ERROR_COMMON_MSG);
  95. }
  96. }catch(Exception e){
  97. logger.error("上传图片发生异常: ", e);
  98. resultVo.setErrCode(ErrorCode.SYS_ERROR_COMMON_CODE);
  99. resultVo.setErrMsg(ErrorCode.SYS_ERROR_COMMON_MSG);
  100. }
  101. outJSONData(resultVo,response);
  102. }
  103.  
  104. }
  1. Constants.ATTACHED_URL :项目访问图片路径
  1. Constants.ATTACHED_PATH :图片保存路径
  1.  

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. iOS 10 获取相册相机权限

            AVAudioSession *audioSession = [[AVAudioSession alloc]init]; [audioSession requestRecordPerm ...

  2. new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

    new运算符 - JavaScript | MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operator ...

  3. Spatial convolution

    小结: 1.卷积广泛存在与物理设备.计算机程序的smoothing平滑.sharpening锐化过程: 空间卷积可应用在图像处理中:函数f(原图像)经过滤器函数g形成新函数f-g(平滑化或锐利化的新图 ...

  4. 设计模式之——迭代器模式

    设计模式是开发者前辈们给我们后背的一个经验总结.有效的使用设计模式,能够帮助我们编写可复用的类.所谓"可复用",就是指将类实现为一个组件,当一个组件发生改变时,不需要对其他组件进行 ...

  5. redis之数据操作详解

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  6. VirtualBox network / study environment setup for RHEL

    I re-visited the RHEL study material and setup the environment again, noted down the procedure. 1, c ...

  7. (0.2.2)如何下载mysql数据库(二进制、RPM、源码、YUM源)

    目录 1.基于Linux平台的Mysql项目场景介绍 2.mysql数据库运行环境准备-最优配置 3.如何下载mysql数据库 3.1. 二进制文件包 3.2.RPM文件 3.3.源码包 3.4.yu ...

  8. java 多线程 day16 CountDownLatch 倒计时计数器

    import java.util.concurrent.CountDownLatch;import java.util.concurrent.CyclicBarrier;import java.uti ...

  9. CentOS 6下OpenCV的安装与配置

    自己按照网上的教程一步一步来的 http://www.jb51.net/os/RedHat/280309.html 虚拟机环境 CentOS 6.5 内核版本:4.1.14 64位 gcc,gcc 4 ...

  10. Linux:Centos7升级内核(转)

    更新前,内核版本为: uname -r 3.10.0-327.10.1.el7.x86_64 升级的方法: 1.导入key rpm --import https://www.elrepo.org/RP ...