kindeditor在SSH项目中应用

最新推荐文章于 2020-12-29 09:30:14 发布

wymaweiyue

最新推荐文章于 2020-12-29 09:30:14 发布

阅读量715

点赞数

分类专栏： Web开发文章标签： KindEditor 图文混排 SSH

本文链接：https://blog.csdn.net/wymaweiyue/article/details/42125501

版权

Web开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在公司的后台管理系统开发中，使用KindEditor来实现图文混排的增删改功能。KindEditor能方便地处理包含文字和图片的内容，通过包装textarea并处理图片上传，生成的HTML代码可以直接存入数据库并在需要时展示。本文记录了在SSH项目中集成KindEditor的步骤，包括下载、目录结构以及JSP页面的应用。

摘要由CSDN通过智能技术生成

最近在做公司网站，后台管理系统中难免要用到增删改“图文混排”页面的功能，例如“公司新闻”、“行业资讯”、“产品介绍”等等内容，都是内容中既包含文字，又包含图片的。如何方便的对类似这样的内容做增删改？经同学介绍，了解了一下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内容，展示在页面即可。