ckeditor粘贴的图片自动上传

环境：java,springmvc,freemaker,ckeditor

在做项目的时候发现本地图片粘贴到ckeditor中，img标签的src中的值是“data:image/png;base64,”开头的，后面会跟一串字符串，图片越大字符串越长，这样的图片在保存的时候一旦放多了过后，后台不知什么原因拿不到其它的参数，所以想把这种图片上传到后台在显示出来。研究了一天的发觉还是挺简单的，主要是ckeditor怎么获取img并获取src 。下面看一下代码。

Js代码

 

function uplaodImage(){

         CKEDITOR.instances.editor.on('change',function(e){

                   var a = e.editor.document ;

                   var b = a.find("img");

                   var count = b.count();

                   for(var i=0;i<count;i++){

                            var src =b.getItem(i).$.src;//获取img的src

                            if(src.substring(0,4)=='data'){

                                     var url = 后台请求路径;

                                     $.ajax({

                                     type:"POST",

                                     url:url,

                                     async:false,//同步，因为修改编辑器内容的时候会多次调用change方法，所以要同步，否则会多次调用后台

                                     data:{'src':src},

                                     success:function(json){

                                                        var data = eval("("+json+")");

                                                        if(data.success){

                                                                 b.getItem(i).$.src=data.url;

                                                        }

                                               }

                                     });

                            }

                   }

         });

}

 

 

 

这里要注意，调用这个方法需要延时，即要在ckeditor加载完后在重写change方法，要不然就会被ckeditor的默认方法覆盖

 

$(function(){setTimeout(uplaodImage,400);});

 

 

Java代码

/**

          * ckeditor粘贴的图片上传并返回访问路径

          * @param request

          * @param response

          */

         public void uploadImage(HttpServletRequest request,HttpServletResponse response){

                   try {

                            String src=request.getParameter("src");

                            if(src==null || src.trim().length()==0){

                                     JsonUtils.sendJson("{'success':false}", response);

                            }else{

                                     String[] srcArr = src.split(";base64,");//data:image/png;base64,iVBORw0KGgoAA

                                     //文件后缀

                                     String fileSuffixes = srcArr[0].split("/")[1];//data:image/png

                                     BASE64Decoder decoder = new BASE64Decoder();

                     byte[] b = decoder.decodeBuffer(srcArr[1]);

                     for(int i=0;i<b.length;++i){

                         if(b[i]<0){//调整异常数据

                             b[i]+=256;

                         }

                     }

                     //文件名称

                           Calendar cal = Calendar.getInstance();

                           SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");

                           String filename = sdf.format(cal.getTime());

                           //图片保存路径

                     String filePath=fileUpLoadUrl+IMAGE_UPLOAD_PATH+"/"+filename+"."+fileSuffixes;

                     //图片访问路径

                           String fileurl=getPath(request)+fileVisitUrl+IMAGE_UPLOAD_PATH+"/"+filename+"."+fileSuffixes;

                     OutputStream out = new FileOutputStream(filePath); //生成图片 

                     out.write(b);

                     out.flush();

                     out.close();

                     JsonUtils.sendJson("{'success':true,'url':'"+fileurl+"'}", response);

                            }

                   } catch (Exception e1) {

                            e1.printStackTrace();

                            JsonUtils.sendJson("{'success':false}", response);

                   }

                  

         }

/**

          * 获取访问路径    http://192.168.2.84:8080

          * @param request

          * @return

          */

         private String getPath(HttpServletRequest request){

                    String scheme = request.getScheme();

        int port = request.getServerPort();

        String serverName = request.getServerName();

        String contextPath = "";//request.getContextPath();

        //请求路径

             String path = scheme + "://" + serverName+":"+ port + contextPath;

             return path;

         }

 

 

其中，访问路径需要在tomcat中配置，

如：保存路径  E://upload/img

访问路径   /view

<Context debug="0" docBase=" E:\upload\img " path="/ view " reloadable="false"/>