Eclipse或Myeclipse中搭建KindEditor環境並測試
最近在學習KindEditor，按照官方手冊在Eclipse中搭建KindEditor的環境時出現了問題，後來解決了，在我的部落格裡寫出來希望對其他的人有幫助。
最後實現的效果應該是這樣的：
（1）可以輸入文字，可以上傳檔案，可以上傳照片。
（2）點選提交以後是跳轉顯示頁面，顯示出剛才的文字，圖片，並可以下載文件
實現步驟
1、在KindEditor的官方網站下載http://www.kindsoft.net/ 下載外掛。我使用的是KindEditor-4.1.7
2、解壓下載的KindEditor，因為我是用Java程式設計，所以可以刪除asp、asp.net、php、examples資料夾。
3、建立一個JavaEE工程，將目錄kindeditor-4.1.7\jsp\lib下面的三個Jar包json_simple-1.1.jar、commons-io-1.4.jar、commons-fileupload-1.2.1.jar
4、如圖所示，在src下面的webapp複製貼上剛才解壓的kindeditor-4.1.7，有的Eclipse會報錯有的Eclipse不會報錯，原因是因為裡面的JavaScript的書寫規範不符合要求，但是不會影響到程式的正常執行。
除去報錯的方法。在專案的物理路徑下面找到檔案 .project，用記事本開啟，或者用UE開啟。找到下面一段程式碼並刪除。接著將Eclipse關閉，並重新開啟。然後此時找到報錯的檔案，全選-->剪下-->儲存-->貼上-->儲存
<buildCommand>
<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
<arguments>
</arguments>
</buildCommand><nature>org.eclipse.wst.jsdt.core.jsNature</nature>5、在目錄src\main\webapp\kindeditor-4.1.7\jsp下找到檔案demo.jsp。將demo.jsp賦值貼上到src\main\webapp\
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>KindEditor JSP</title>
<link rel="stylesheet" href="kindeditor-4.1.7/themes/default/default.css" />
<link rel="stylesheet" href="kindeditor-4.1.7/plugins/code/prettify.css" />
<script charset="utf-8" src="kindeditor-4.1.7/kindeditor.js"></script>
<script charset="utf-8" src="kindeditor-4.1.7/lang/zh_CN.js"></script>
<script charset="utf-8" src="kindeditor-4.1.7/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="content1"]', {
cssPath : 'kindeditor-4.1.7/plugins/code/prettify.css',
uploadJson : 'kindeditor-4.1.7/jsp/upload_json.jsp',
fileManagerJson : 'kindeditor-4.1.7/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}
});
prettyPrint();
});
</script>
</head>
<body>
<form name="example" method="post" action="show.jsp">
<textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
<br />
<input type="submit" name="button" value="提交內容" /> (提交快捷鍵: Ctrl + Enter)
</form>
</body>
</html>
<%!
private String htmlspecialchars(String str) {
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("\"", """);
return str;
}
%>6、再建立起一個顯示頁面show.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>KindEditor JSP</title>
</head>
<body>
<%=htmlData%>
</body>
</html>7、修改src\main\webapp\kindeditor-4.1.7\jsp目錄下的 upload_json.jsp和file_manager_json.jsp檔案中一段程式碼
String saveUrl = request.getContextPath() + "attached/"; 給成
String saveUrl = request.getContextPath() + "/attached/";多加一個斜槓
8、並在webapp下面建立資料夾attached
9、啟動工程，輸入網址：localhost:8080/kindeditor/demo.jsp 進行測試