富文本编辑器kindEditor简单教程

最近需求用到了富文本编辑器。kindEditor一直是我的首选，简单好用，功能挺全。

首先下载kindEdtor资源包。

我这里使用的是jsp,只需要把下列包拷贝到kindEditor文件夹下（WebRoot新建文件夹kindEditor）：

jsp,lang,plugins,thems主要的是这四个包。把kindeditro-all.js也拷贝到kindEditor文件夹下。

在jsp中引入所需要的文件

head:
<script src="js/jquery-1.4.2.js"></script>
<link rel="stylesheet" href="kindEditor/themes/default/default.css" />
<link rel="stylesheet" href="kindEditor/plugins/code/prettify.css" />
<script charset="utf-8" src="kindEditor/kindeditor-all.js"></script>
<script charset="utf-8" src="kindEditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="kindEditor/plugins/code/prettify.js"></script>

<script type="text/javascript">
   KindEditor.ready(function(K) {
    var  editor1 = K.create('textarea[name="名字"]', {
      cssPath : 'kindEditor/plugins/code/prettify.css',
                  uploadJson : 'kindEditor/jsp/upload_json.jsp',
      fileManagerJson : 'kindEditor/jsp/file_manager_json.jsp',
      allowFileManager : true,
      afterCreate : function() {
        var self = this;
        K.ctrl(document, 13, function() {
          self.sync();
          document.forms['froForm'].submit();
        });
        K.ctrl(self.edit.doc, 13, function() {
          self.sync();
          document.forms['froForm'].submit();
        });
      }
    });
    prettyPrint();
 });
</script> 

body:

<textarea name="名字" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"></textarea> //与上面名字保持一致

这里需要注意的是：

jsp中只需要这两个文件，并且这两个文件中可以修改上传本地图片的保存地址
file_manager_json.jsp中

//根目录路径，可以指定绝对路径，比如 /var/www/attached/
//这里指定为WebRoot下自建的upload文件夹
String rootPath = pageContext.getServletContext().getRealPath("/") + "upload/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl  = request.getContextPath() + "/upload/";

upload_json.jsp中

//文件保存目录路径  
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";  

//文件保存目录URL  
String saveUrl  = request.getContextPath() + "/upload/";  

如果出现上传本地图片错误，请以下面代码完全替换upload_json.jsp

<%@ 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.apache.struts2.dispatcher.multipart.*" %>  
<%@ page import="org.json.simple.*" %>  
<%  

/**  
 * KindEditor JSP  
 *   
 * 本JSP程序是演示程序，建议不要直接在实际项目中使用。  
 * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。  
 *   
 */  
//文件保存目录路径  
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";  

//文件保存目录URL  
String saveUrl  = request.getContextPath() + "/upload/";  

//定义允许上传的文件扩展名  
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");  

//最大文件大小  
long maxSize = 1000000;  

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");  
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();  
}  



MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request;   
File file = wrapper.getFiles("imgFile")[0];   
String fileName = wrapper.getFileNames("imgFile")[0];  
//检查文件大小  
        if(file.length() > maxSize){  
            String temStr= "上传文件大小超过限制。";  
            out.println(getError(temStr));  
            return;  
        }  
//检查扩展名  
        String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();  
        if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){  
            String temStr= "上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。";  
            out.println(getError(temStr));  
            return;  
        }  
        SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");  
        String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;  
        try {    
            InputStream in = new FileInputStream(file);    
            File uploadFile = new File(savePath, newFileName);    
            OutputStream outFile = new FileOutputStream(uploadFile);    
            byte[] buffer = new byte[1024 * 1024];    
            int length;    
            while ((length = in.read(buffer)) > 0) {    
                outFile.write(buffer, 0, length);    
            }    

            in.close();    
            outFile.close();    
        } catch (FileNotFoundException ex) {    
            ex.printStackTrace();    
        } catch (IOException ex) {    
            ex.printStackTrace();    
        }    

        JSONObject obj = new JSONObject();  
        obj.put("error", 0);  
        obj.put("url", saveUrl + newFileName);  
        out.println(obj.toJSONString());  
%>  
<%!  
private String getError(String message) {  
    JSONObject obj = new JSONObject();  
    obj.put("error", 1);  
    obj.put("message", message);  
    return obj.toJSONString();  
}  
%>  

这个方法转自解决kindeditor上传图片、文件的错误这个博客。