j2ee下kindeditor的配置使用

最新推荐文章于 2022-06-24 15:16:54 发布

iteye_8211

最新推荐文章于 2022-06-24 15:16:54 发布

阅读量156

点赞数

文章标签： JSP JavaScript ASP.net ASP CSS ViewUI

本文详细介绍KindEditor在线编辑器的集成步骤与注意事项，包括文件夹创建、资源文件放置、jar包配置及JSP页面调用等关键环节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天写项目，一个模块中的功能需要在线编辑器来做（组长下令），没做过，哎，没办法，顶着头皮开始，在网上找到好多的文章，说什么的都有，没找到好的文章，就自己边参考边自己琢磨，效果总算出来了，特贴出来，以后再用时好找，也是为了与大家共勉。

首先，在WebRoot下创建一个文件夹，取名为kindeditor.

第二，下载由我提供的kindeditor-3.5-zh_CN.zip架包，当然在网上也能搜索并下载的到，之后解压，把解压后得到的所有文件及文件夹（如：asp , asp.net , attached , examples , jsp , php , plugins , skins , kindeditor.js , kindeditor-min.js）都放在刚刚创建的WebRoot下的kindeditor文件夹内（见附件图）.

第三，提示：最重要的最必须的是kindeditor.js文件和plugins ， skins两个文件夹，千万要放进去，至于其它的文件夹，可放可不放，一般是没用的，比如，examples就是20多个效果html.

第四，解压后的文件夹kindeditor-3.5-zh_CN下有个jsp的文件夹，打开后，有个lib的文件夹，里面有三个架包:commons-fileupload-1.2.1.jar , commons-io-1.4.jar , json_simple-1.1.jar，把三个架包放入WEB-INF 下的lib文件夹内，并刷新项目.

第五，以后配置好之后，就可以直接在jsp页面上调用了，要保证的是在jsp页面上调 kindeditor.js文件时，路径一定要正确哦，呵呵，如下：（代码中有不便之处（项目名和客户资料等），已剪掉，但不关在线编辑器的事），此jsp文件的路径是放在check文件夹下的xzbj文件夹内（见附件图）.

<%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="gbk"%>
<%@ include file="../../inc/common.jsp"%>
<%
String htmlData = request.getParameter("clgc") != null ? request.getParameter("clgc") : "";
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<html>
	<head>
		<script type="text/javascript" src="<%=basePath%>kindeditor/kindeditor.js"></script>
	    <script type="text/javascript">
		KE.show({
				id : 'clgc',
				resizeMode : 1,
				allowPreviewEmoticons : false,
				allowUpload : false,
				items : [
				'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline',
				'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'emoticons', 'image', 'link']
			});
	</script>
		<link rel="stylesheet" type="text/css" href="inc/topgta.css" />
		<script type="text/javascript" src="inc/electricitysys/date2.js"></script>
		<script type="text/javascript">
			function getTimes(){
				var mydate = new Date();
				var year = mydate.getYear();
				var yue = mydate.getMonth()+1;
				var day = mydate.getDate();
				var crrentHol = mydate.getHours();
				var crrentMun = mydate.getMinutes();
				var crrentSec = mydate.getSeconds();
					if(crrentHol<10){
  						crrentHol = '0'+crrentHol;
						}
					if(crrentMun<10){
  						 crrentMun = '0'+crrentMun;
						}
					if(crrentSec<10){
   						 crrentSec = '0'+crrentSec;
						}
					var crrenDate =year+'年'+yue+'月'+day+'日'+''+crrentHol+':'+crrentMun+':'+crrentSec;
							document.getElementById("showtime").value = crrenDate;
			}
					setInterval("getTimes()",1000);
		</script>
	</head>

	<body>
	<%=htmlData%>
		<form name="form1" method="post" accept-charset="gbk" onsubmit="document.charset='gbk'">
		
			<br />
			<br />
			<br />
			<table width="500" border="1" align="center" cellpadding="0"
				cellspacing="5" bordercolor="#006699"
				style="border: #006699 1px solid;">

				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						处理标题:
					</td>
					<td style="text-align: center">
						${clbt}
						<input type="hidden" id="clbt" name="clbt" value="${clbt}"/>
						<input type="hidden" id="clid" name="clid" value="${clid}"/>
					</td>
				</tr>
				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						处理日期:
					</td>
					<td style="text-align: center">
						<input id="riqi" type="text" style="text-align: center"
							name="riqi"
							onfocus="this.value='';fPopCalendar(this,this,this.value);return false;"
							readonly="readonly" style="width:150" />
					</td>
				</tr>
				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						处理部门:
					</td>
					<td style="text-align: center">
						<input type="text" id="clbm" name="clbm" style="width: 150"></input>
					</td>
				</tr>
				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						处理过程:
					</td>
					<td style="text-align: center">
					<textarea id="clgc" name="clgc" cols="10" rows="4" style="width:380px;height:100px;visibility:hidden;">
					
					<%=htmlspecialchars(htmlData)%>
					
					</textarea>
					</td> 
				</tr>
				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						处理结果:
					</td>
					<td style="text-align: center">
						<input type="text" id="cljg" name="cljg" 
							style="width: 150"></input>
					</td>
				</tr>
				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						处理进度:
					</td>
					<td style="text-align: center">
						<input type="text" id="cljd" name="cljd"
							style="width: 150"></input>
					</td>
				</tr>
				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						当事人满意度:
					</td>
					<td style="text-align: center">
						<input type="radio" name="cljddsrmyd" id="cljddsrmyd" value="非常满意" /><font size="2">非常满意</font>
						<input type="radio" name="cljddsrmyd" id="cljddsrmyd" value="满意" /><font size="2">满意</font>
						<input type="radio" name="cljddsrmyd" id="cljddsrmyd" value="不满意" /><font size="2">不满意</font>
					</td>
				</tr>
				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						状态:
					</td>
					<td style="text-align: center">
						<input id="cldt" name="cldt" type="text" style="width: 150" />
					</td>
				</tr>
				<tr align="left">
					<td class="table-titile-col"
						style="text-align: center; font-size: 15px">
						备注:
					</td>
					<td style="text-align: center">
						<input id="clbz" name="clbz" type="text" style="width: 150" />
					</td>
				</tr>
				<tr align="left">
					<td colspan="12" style="text-align: center" width="5%">
						<input type="button" value="返回" onclick="window.history.back()"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
<%!
private String htmlspecialchars(String str) {
	str = str.replaceAll("&", "&amp;");
	str = str.replaceAll("<", "&lt;");
	str = str.replaceAll(">", "&gt;");
	str = str.replaceAll("\"", "&quot;");
	return str;
}
%>

request.getParameter("clgc")是获取文本域的值是否为空，

basePath是获取当前系统的路径

蓝色字体是导入kindeditor.js文件

script 中的KE.show()我用的是最简单的模式，共有20多种，大家可随意调用，在examples文件夹内，items中的值也可随意删掉或添加上去，呵呵

如果这条数据进入数据库的表中，那它肯定是带有Html标签的，那如果读出这条数据将也会带有标签，怎么去掉标签呢，呵呵，在Struts1中的<b:write>中有个 filter="" 的属性，给它赋值 false ,就把Html标签去掉了

OK了，到此就可以结束了，效果也出来了，如还有其它疑问，请联系我，共同进步，呵呵