富文本可上传图片版
经过几次的运用,需求的增加。对KindEditor文本编辑框多了几分了解。首先是图片的上传功能。其次是对文章的重新编译
直接贴代码;
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="../css/xinwenyemian.css" > <script charset="utf-8" src="kindeditor.js"></script> <script charset="utf-8" src="lang/zh_CN.js"></script> <script charset="utf-8" src="plugins/code/prettify.js"></script> <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> <script> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name="content1"]', { cssPath : '../plugins/code/prettify.css', //这里表示编译框的css修饰 uploadJson : '../jsp/upload_json.jsp', //这里是图片上传的jsp(图片上传框点击确认提交会去该jsp) fileManagerJson : '../jsp/file_manager_json.jsp', //文件上传的jsp allowFileManager : true, afterCreate : function() { var self = this; K.ctrl(document, 13, function() { self.sync(); document.forms['example'].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); document.forms['example'].submit(); }); } }); });
editor1.html("后台传入的数据") //这里是把后台的数据赋值到文本编译框中。
</script>
</head>
<body>
<div class="all">
<form name="example" id="action" method="post" action="http://123.59.24.94:9990/sssss"> <!-- <form name="example" id="action" method="post" action="/bbs/accountController/gameTie.do">、-->
<div>选择总类<select id="xwselect" name="type"> <option value="最新">最新</option> <option value="新闻">新闻</option> <option value="公告">公告</option> <option value="活动">活动</option> </select> </div> <div class="title"> 标题:<input class="titleinput" type="text" name="title"/></div> <div> 内容简介<input class="titleinput" type="text" name="jie"/></div>
<textarea id="pic" name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden; "></textarea> <br />
<input type="submit" name="button" value="提交内容" />
</form>
</div>
</body>
</html>
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.json.simple.*"%> <% /** * KindEditor JSP * * 本JSP程序是演示程序,建议不要直接在实际项目中使用。 * 如果您确定直接使用本程序,使用之前请仔细确认相关安全设置。 * */ //文件保存目录路径 String savePath = pageContext.getServletContext().getRealPath("/") + "linhunzhangehoutai\\attached/"; System.out.println(savePath); //文件保存目录URL String saveUrl = request.getContextPath() + "\\linhunzhangehoutai\\attached/"; System.out.println(saveUrl); //定义允许上传的文件扩展名 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(); } FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8"); List items = upload.parseRequest(request); Iterator itr = items.iterator(); while (itr.hasNext()) { FileItem item = (FileItem) itr.next(); String fileName = item.getName(); long fileSize = item.getSize(); if (!item.isFormField()) { //检查文件大小 if (item.getSize() > maxSize) { out.println(getError("上传文件大小超过限制。")); return; } //检查扩展名 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; } SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; try { File uploadedFile = new File(savePath, newFileName); item.write(uploadedFile); } catch (Exception e) { out.println(getError("上传文件失败。")); return; } JSONObject obj = new JSONObject(); System.out.println(saveUrl + newFileName); 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(); }%>