【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文件存放的路径;