kindeditor在SSH项目中应用

来源：互联网发布：python service 编辑：程序博客网时间：2024/06/05 04:47

最近在做公司网站，后台管理系统中难免要用到增删改“图文混排”页面的功能，例如“公司新闻”、“行业资讯”、“产品介绍”等等内容，都是内容中既包含文字，又包含图片的。如何方便的对类似这样的内容做增删改？经同学介绍，了解了一下KindEditor，发现它完全能满足我的需求。下载后试用了一下，很方便，
现记录如下：
个人理解：当我们的页面中需要插入大段的图文混排内容时，必然试用一个textarea输入框，KindEditor.ready(K.create('#areaID',{....})方法会重新包装我们的textarea；此时，我们在包装过的textarea中插入一张图片，插入图片的操作是一个单独的方法在处理，将图片上传至服务器，然后将图片src放入textarea中，文字的样式也经过了处理，最后形成了一段经过处理的html代码，里面包含了对图片的引用（如：<img src=''/>）以及文字的各种样式。并且这段html代码是作为jsp页面textarea的值可以传至后台，存入数据库中，需要展示时从数据库中读出这段html代码直接放在页面上即可照原样显示。
下载KindEditor，我下载的是kindeditor-4.1.10。我的项目试用常用的SSH架构，实际上KindEditor使用跟SSH没多大关系。
下载kindeditor-4.1.10解压后直接放到WebRoot/js/目录下，目录结构：WebRoot/js/kindeditor-4.1.10，KindEditor作为一个前台插件，可以使用在PHP、ASP、ASP.net、JSP等页面中，本人使用JSP，所以只留下jsp和其他的通用的内容，其他的php等几个文件夹删除。

JSP内容：

<%@ page language="java" contentType="text/html; charset=UTF-8"%><%@taglib prefix="s" uri="/struts-tags"%><!DOCTYPE html><html><head><title>添加应用</title><link href="/SPWMS/css/main.css" rel="stylesheet" type="text/css" /><script src="/SPWMS/js/jQuery/jquery-1.8.0.js"></script><script src="/SPWMS/js/jQuery/jquery.form.js"></script><script src="/SPWMS/js/jQuery/jquery-ui-1.8.23.custom.min.js"></script><script src="/SPWMS/js/kindeditor-4.1.10/kindeditor.js" charset="utf-8" ></script><script>          KindEditor.ready(function(K) {K.create('#detaileInfo', { //detaileInfo为jsp页面中需要插入图文混排内容的textarea输入框的ID       uploadJson : '/SPWMS/xxxAction!upload.action',  // 插入图片时，处理图片上传的action路径        fileManagerJson : '/manage/ajax/fileManage.do',          allowFileManager : true,        afterBlur : function(){ this.sync(); }   })  });  </script></head><body><s:form id="productNewForm" action="xxxAction!addSubmit.action" theme="simple"><s:hidden name="entity.pImage" id="pImage"/><s:hidden name="entity.pBIgImage" id="pBigImage"/><div class="main"><!-- 主体开始 --><table class="tableModify">        <tr>        <th>备注：</th>        <td colspan="2">          <textarea id="detaileInfo" title="备注" name="entity.pDetails" style="width:670px;height:420px;" class="info">                   </textarea>        </td>        </tr>    </table><!-- 主体结束 --></div></s:form></body></html>

首先JSp中需要引入kindeditor.js，并且需要js方法：KindEditor.ready(K.create('#areaID',{....})来重新包装textarea，以及定义图片上传的处理方法。
接下来我们只需要在action中写一个对应的处理上传图片的方法即可：

Action：

package sp.xxxx.action;import java.io.File;import java.io.FilenameFilter;import java.io.InputStream;import java.util.List;import net.sf.json.JSONObject;public class XxxAction {private static final long serialVersionUID = 1L;private ApplicationSchemeService productService;private MenuService menuService;private InputStream imagStream;/** 以下几个变量的名字不可改变，如果要改变，需要修改kindeditor-4.1.10目录下的html内的变量，具体哪个html文件找找就知道了 */private File imgFile;/** 文件名称 */private String imgFileFileName;/** 图片宽度 */private String imgWidth;/*** 图片高度14 */private String imgHeight;/** 图片对齐方式 */private String align;/** 2图片标题24 */private String imgTitle;/** 处理页面图片上传 */public String upload() {// 文件保存目录路径String savePath = ServletActionContext.getServletContext().getRealPath("/") + "images/aboutsp/";String saveUrl = request.getContextPath() + "/images/aboutsp/";response.setContentType("text/html; charset=UTF-8");response.setContentType("text/html; charset=UTF-8");// 定义允许上传的文件扩展名String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" };// 最大文件大小long maxSize = 10 * 1024 * 1024;PrintWriter out = null;try {out = response.getWriter();if (imgFile == null) {out.println(getError("请选择文件。"));return null;}// 检查目录File uploadDir = new File(savePath);if (!uploadDir.isDirectory()) {out.println(getError("上传目录不存在。"));return null;}// 检查目录写权限if (!uploadDir.canWrite()) {out.println(getError("上传目录没有写权限。"));return null;}File dirFile = new File(savePath);if (!dirFile.exists()) {dirFile.mkdirs();}String fileExt = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") + 1).toLowerCase();if (!Arrays.<String> asList(fileTypes).contains(fileExt)) {out.println(getError("上传文件扩展名[" + fileExt + "]是不允许的扩展名。"));return null;}if (imgFile.length() > maxSize) {out.println(getError("[ " + imgFileFileName + " ]超过单个文件大小限制，文件大小[ "+ imgFile.length() + " ]，限制为[ " + maxSize + " ] "));return null;}SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");String newFileName = df.format(new Date()) + "_"+ new Random().nextInt(1000) + "." + fileExt;File uploadedFile = new File(savePath, newFileName);FileUtils.copyFile(imgFile, uploadedFile);JSONObject obj = new JSONObject();obj.put("error", 0);obj.put("url", saveUrl + newFileName);out.println(obj.toString());} catch (IOException e) {}return null;}public void setApplicationSchemeService(ApplicationSchemeService productService) {this.productService = productService;}public void setMenuService(MenuService menuService) {this.menuService = menuService;}public InputStream getImagStream() {return imagStream;}public void setImagStream(InputStream imagStream) {this.imagStream = imagStream;}public File getImgFile() {return imgFile;}public void setImgFile(File imgFile) {this.imgFile = imgFile;}public String getImgFileFileName() {return imgFileFileName;}public void setImgFileFileName(String imgFileFileName) {this.imgFileFileName = imgFileFileName;}public String getImgHeight() {return imgHeight;}public void setImgHeight(String imgHeight) {this.imgHeight = imgHeight;}public String getAlign() {return align;}public void setAlign(String align) {this.align = align;}public String getImgTitle() {return imgTitle;}public void setImgTitle(String imgTitle) {this.imgTitle = imgTitle;}public String getImgWidth() {return imgWidth;}public void setImgWidth(String imgWidth) {this.imgWidth = imgWidth;}}

以上action方法upload()用来处理上传的图片，要改变图片的存储路径、图片名称等等，可以自由修改，只要清楚这个方法是用来处理客户端上传的图片的就行。此方法中存储图片后，会将图片的存储路径放入json中返回客户端，KindEditor会将此路径放入页面textarea的内容中。
整个textarea里的内容整理好之后，提交整个form表单即可，将页面的textarea内容直接存入数据库。我们看看这里面的内容就会发现实际就是一大段的html代码。在页面中要显示时直接从数据库中拿出该段html内容，展示在页面即可。

0 0