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 + ‘"  />‘;
                                               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 :图片保存路径
 
时间: 2025-01-28 19:12:30

KindEditor ctrl+v添加图片功能的相关文章

为Kindeditor控件添加图片自动上传功能

Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官方网站可以查看这里:http://kindeditor.net/index.php Kindeditor本身提供了许多非常实用的插件,由于代码开源,开发人员可以根据需要对其进行任意扩展和修改. 在使用Kindeditor编辑网站内容时考虑这样一个场景:编辑人员往往会从其它页面或者Word文档将内容复

js实现ctrl+v粘贴图片或是截图

浏览器环境:谷歌浏览器 1.ctrl+v粘贴图片都是监听paste时间实现的,复制的数据都存在clipboardData下面,虽然打印显示数据长度为0,但是还是可以获取数据的 2.打印clipboardData.items发现是一个DataTransferItem. 3.DataTransferItem有个getAsFile()的方法,可以获取文件 document.addEventListener('paste', function (event) { console.log(event);

ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解决这一问题 发现不管什么编辑器只要将图片转换成base64后就可以直接使用(IE8及一下可能不支持),由于编辑器中添加word文档功能也只是自己用,因此可以忽略这种浏览器了 找了很久,试用了很多编辑器,

C# 控制台程序实现 Ctrl + V 粘贴功能

代码主要分为两部分,首先调用系统API注册剪切板相关的事件,然后监控用户的按键操作.完整代码如下: class ClipBoard { [DllImport("user32.dll", SetLastError = true)] private static extern Int32 IsClipboardFormatAvailable(uint format); [DllImport("user32.dll", SetLastError = true)] priv

kindeditor扩展粘贴图片功能&amp;修改图片上传路径并通过webapi上传图片到图片服务器

前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功能 kindeditor修改图片上传路径并通过webapi上传图片到图片服务器(支持分布式图片) 结果演示 1.扩展粘贴图片功能演示 2.修改图片上传路径演示: 我们的网站演示地址是:http://localhost:9393/ 我们的图片服务器地址是:http://localhost:9394/

在VC中,为图片按钮添加一些功能提示(转)

在VC中,也常常为一些图片按钮添加一些功能提示.下面讲解实现过程:该功能的实现主要是用CToolTipCtrl类.该类在VC  msdn中有详细说明.首先在对话框的头文件中加入初始化语句:public:下,加入:CToolTipCtrl    m_Mytip;然后在初始化对话框函数中加入:m_Mytip.Create(this);  m_Mytip.AddTool( GetDlgItem(IDC_BUTTON), "你想要添加的提示信息" ); //IDC_BUTTON为你要添加提示信

js实现ctrl+v粘贴并上传图片

再分享一个刚学会的小东东:聊天室实现ctrl+v粘贴并上传图片,亲测有效(目前只能粘贴QQ或者微信的截图上传,桌面上的图片直接复制再粘贴无效,今后再深究),下面上代码 前端页面: <textarea class="scroll" id="text" placeholder="在此输入..."></textarea> <script type="text/javascript"> docume

在TextView中添加图片

TextView是一个很强大的控件,有时需要在一个控件中同时显示图片和文字,使用TextView很容易实现. 方法一: 聊天软件比如QQ一般都会有发送表情的功能,使用SpannableString+ImageSpan可以很容易实现 [java] view plaincopy private void showImageFace(String s,View v) { Bitmap bitmap; ImageSpan imageSpan; // 创建一个SpannableString对象,以便插入用

MFC 基础知识:对话框背景添加图片和按钮Button添加图片

很长时间没有接触MFC相关的知识了,我大概是在大二时候学习的MFC相关知识及图像处理,现在由于要帮个朋友完成个基于C++的程序,所以又回顾了下相关知识.的确,任何知识一段时间过后都比较容易忘记,但回顾起来还是很有印象的. 这篇文章主要是回顾以前的MFC基础知识,给对话框添加背景图片和给按钮button添加背景图片:希望此篇基础性文章对大家有所帮助!同时为下次做MFC相关知识提供点此时所想所感吧.内容比较简单,高手飘过~ 一. 对话框背景添加图片 首先通过VS2012创建MFC对话框应用程序,项目