KindEditor 详细介绍

【1】下载 KindEditor 最新版本。打开下载页面 

【2】 解压zip文件，将所有文件上传到您的网站程序目录下(Webroot目录下)。例如：http://您的域名/editor/ 

【3】引入js文件

<script type="text/javascript" charset="utf-8" src="<%=path%>/kindeditor/kindeditor.js">

【4】引入样式文件

table{

	border-collapse: collapse;
	border-spacing: 0;
	padd:expression(this.cellPadding=0);
}

【5】在需要显示编辑器的位置添加TEXTAREA文本域输入框。 

id在当前页面必须是唯一的值，还有，在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。 

<pre name="code" class="java"><form action="doAdd.jsp" method="post">
    <table align="center" width="1150px;">
    	<tr>
    	    <td>作者：</td>
    <span style="white-space:pre">	</span>    <td><input type="text" name="author"/></td>
    	</tr>
    	<tr>
    	    <td>留言：</td>
    	    <td>
                <textarea id="test" name="message" cols="100" rows="8" style="width: 700px;height: 200px;visibility:hidden;" unat="server"><span style="color:#cc0000;background-color: rgb(51, 204, 0);"><%=htmlspecalchars(htmlData) %></span></textarea>
    	    </td>
    	</tr>
    	<tr>
    	    <td><input type="submit" value="提交"/></td>
    	    <td><input type="reset" value="重置"/></td>
    	</tr>   		
    </table>
</form>

注意：文本域要先隐藏掉！

给编辑器过滤一些特殊字符，以及防止SQL注入

<pre name="code" class="java"> <%!
    	//给编辑器过滤一些特殊字符
    	public String htmlspecalchars(String str){
    		str = str.replaceAll("&","&");
    		str = str.replaceAll("<","<");
    		str = str.replaceAll(">",">");
    		str = str.replaceAll("\"",""");
    		return str;
    	}
     %>

//获取编辑器里面的值

<%
String htmlData = request.getParameter("message")!=null?request.getParameter("message"):"";
%>

【6】引入编辑器，在该HTML页面添加以下脚本。

<script>
  	KE.show({
  		id:'test',
  		imageUploadJson:'<%=path%>/kindeditor/upload_json.jsp',
  		fileManagerJson:'<%=path%>/kindeditor/file_manager_json.jsp',
  		allowFileManager:true,
  		afterCreate:function(id){
  			KE.event.ctrl(document,13,function(){
  				KE.util.setData(id);
  				document.forms['example'].submit();
  			});
  			KE.event.ctrl(KE.g[id].iframeDoc,13,function(){
  				KE.util.setData(id);
  				document.forms['example'].submit();
  			});
  		}
  	});	
  </script>

每次运用时需要修改的三个地方：

1. 文本域的id；2.upload_json.jsp文件存放的路径；3.file_manager_json.jsp文件存放的路径；