使用kindeditor上传图片

使kindeditor中的图片适应编辑器大小

作者：kiss小祥   QQ 244556979

语言：java 在jsp里使用

版本：4.1.7  2013年4月21发布的，最新版哦

公司做博文发布系统，需要一个在线所见即所得的编辑器，找了好多 比如ckediter，ewebediter，kindeditor，ueditor。。。

最后还是选择了kindeditor。只因为看它顺眼。恩。。就是顺眼。

关于kindeditor的使用我就不说了，官网有详细的中文介绍，主要说一下使用过程中的问题。

错误一

上传图片的时候按照官网的配置，总是报上传错误。

当我满怀欣喜的下载下来，并且按照配置配置好了。。。然后就伤了

以下为我的编辑器配置：

KindEditor.ready(function(K) {

  window.editor = K.create("#content",{

//上传程序（是一段写在jsp里面的上传代码）

 uploadJson : '../editor/jsp/upload_json.jsp',

//文件管理程序（获取文件、图片列表，并显示）

 fileManagerJson : '../editor/jsp/file_manager_json.jsp',

//可以设置是否显示图片空间按钮（不安全，发布到互联网以后不建议显示）

 allowFileManager : false,

//按钮组

 items:[

           'forecolor', 'hilitecolor', 'bold','italic', 'underline',  'removeformat', 

           'undo', 'redo', '|','justifyleft', 'justifycenter', 'justifyright',

          'justifyfull', 'insertorderedlist', 'insertunorderedlist', 

          'formatblock', 'fontname', 'fontsize', '|',  'image', 'multiimage','emoticons', 'link'

          ],

//是否可以拖动 0：不可以

     resizeType:0,

themeType:"simple",

//这是关系到图片自动缩小的样式，想让图片适应编辑器，一定要写哦，等会贴代码

    cssPath:"../tools/css/kindeditoriframe-user.css",

width:"650px",

height:"300px"

  });

});

Ok，配置好了。然后兴奋的开始上传图片。。。。

我靠。。咱们社区不支持上传图片。。。。

用下面代码替换upload_json.jsp  ok。。上传成功

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 

<%@ page import="java.util.*,java.io.*" %> 

<%@ page import="java.text.SimpleDateFormat" %> 

<%@ page import="org.apache.commons.fileupload.*" %> 

<%@ page import="org.apache.commons.fileupload.disk.*" %> 

<%@ page import="org.apache.commons.fileupload.servlet.*" %> 

<%@ page import="org.json.simple.*" %> 

<%@ page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper" %> 

  

<% 

//文件保存目录路径     

//存放在\kindeditor\attached下

String savePath = request.getSession().getServletContext().getRealPath("/") + "upload/article/"; 

//文件保存目录URL /kindeditor/attached/

String saveUrl = request.getContextPath() + "/upload/article/"; 

//String saveUrl =  "../upload/article/"; 

//定义允许上传的文件扩展名 

//定义允许上传的文件扩展名 

HashMap<String, String> extMap = new HashMap<String, String>(); 

extMap.put("image", "gif,jpg,jpeg,png,bmp"); 

extMap.put("flash", "swf,flv"); 

extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); 

extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); 

  

//允许最大上传文件大小 struts.xml struts.multipart.maxSize=3G 

long maxSize = 3000000l; 

  

response.setContentType("text/html; charset=UTF-8"); 

  

if(!ServletFileUpload.isMultipartContent(request)){ 

    out.println(getError("请选择文件。")); 

    return; 

} 

//检查目录 

File uploadDir = new File(savePath); 

if(!uploadDir.isDirectory()){ 

    out.println(getError("上传目录不存在。")); 

    return; 

} 

//检查目录写权限 

if(!uploadDir.canWrite()){ 

    out.println(getError("上传目录没有写权限。")); 

    return; 

} 

  

String dirName = request.getParameter("dir");//image 

if (dirName == null) { 

    dirName = "image"; 

} 

if(!extMap.containsKey(dirName)){ 

    out.println(getError("目录名不正确。")); 

    return; 

} 

//创建文件夹 

savePath += dirName + "/"; 

saveUrl += dirName + "/";

File saveDirFile = new File(savePath); 

if (!saveDirFile.exists()) { 

    saveDirFile.mkdirs(); 

} 

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); 

String ymd = sdf.format(new Date()); 

savePath += ymd + "/";

saveUrl += ymd + "/";

File dirFile = new File(savePath); 

if (!dirFile.exists()) { 

    dirFile.mkdirs(); 

} 

if (!dirFile.isDirectory()) { 

    out.println(getError("上传目录不存在 。")); 

    return; 

} 

//检查目录写入权限 

if (!dirFile.canWrite()) { 

    out.println(getError("上传目录没有写入权限。")); 

    return; 

} 

  

MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request; 

//获得上传的文件名 

String fileName = wrapper.getFileNames("imgFile")[0];//imgFile,imgFile,imgFile 

//获得文件过滤器 

File file = wrapper.getFiles("imgFile")[0]; 

  

//检查扩展名 

String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); 

if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){ 

    out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。")); 

    return; 

} 

//检查文件大小 

if (file.length() > maxSize) { 

        out.println(getError("上传文件大小超过限制。")); 

        return; 

}  

  

  

//重构上传图片的名称  

SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); 

String newImgName = df.format(new Date()) + "_"

                + new Random().nextInt(1000) + "." + fileExt; 

byte[] buffer = new byte[1024]; 

//获取文件输出流 

FileOutputStream fos = new FileOutputStream(savePath +"/" + newImgName); 

//获取内存中当前文件输入流 

InputStream in = new FileInputStream(file); 

try { 

        int num = 0; 

        while ((num = in.read(buffer)) > 0) { 

                fos.write(buffer, 0, num); 

        } 

} catch (Exception e) { 

        e.printStackTrace(System.err); 

} finally { 

        in.close(); 

        fos.close(); 

} 

//发送给 KE  

JSONObject obj = new JSONObject(); 

obj.put("error", 0); 

obj.put("url", saveUrl +"/" + newImgName); 

///zswz/attached/image/20111129/  image 20111129195421_593.jpg 

out.println(obj.toJSONString()); 

%> 

<%! 

private String getError(String message) { 

    JSONObject obj = new JSONObject(); 

    obj.put("error", 1); 

    obj.put("message", message); 

    return obj.toJSONString(); 

} 

%> 

Ok 解决上传问题，然后就看到可以上传了

好吧。。图片太宽，滚动条破坏了我的视觉。我要改变这局面，，但是。。编辑器不是我写的，我不知道哪里有这样的属性可以设置。。而且貌似没有。

在网上搜了好多 大多数都是更改上传程序 也就是upload_json.jsp  但是当使用程序缩小图片的时候会造成图片失真。而保存两份啰嗦不说而且浪费空间。。

茫茫然不知所以然的时候。。我就去看官方的说明文档去了。然后就看到这一个属性：cssPath

指定编辑器iframe document的CSS文件，用于设置可视化区域的样式。

· 数据类型: String或Array

· 默认值: 空

灵光一闪，终于，在本大侠的聪明才智下自己找到了一个解决办法：

很简单，第一步：创建一个css文件 内容如下：

@CHARSET "UTF-8";

img {

max-width: 770px;

width: expression(this.width>770?"770px":this.width+"px");

overflow: hidden;

}

然后在编辑器配置文件里引入这个css文件。就像这样 

然后开启编辑器 上传，哈哈。。效果出来了~~而且缩小不失真。

特此分享。希望大家使用的时候多看看官方文档。祝大家使用愉快。

转载请注明出处，thanks。