富文本编辑器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上传图片、文件的错误这个博客。