給jsp頁面整合富文本編輯器
下載——刪除多餘的組件——加入到項目中——參照案例來完成整合
步驟:
1. 解壓zip文件,將全部文件複製到Tomcat的webapps/kindeditor目錄下。css
2. 將kindeditor/jsp/lib目錄下的3個jar文件複製到Tomcat的lib目錄下,並從新啓動Tomcat。
* commons-fileupload-1.2.1.jar
* commons-io-1.4.jar
* json_simple-1.1.jar
如下用我下載的副文本編輯器爲例
3.把下邊的集成表明粘貼到目標文件中(記得修改必要的數據)
代碼以下:
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
//這裏名字是富文本域的name,後臺取數據時用的name
var editor1 = K.create('textarea[name="context"]', {
cssPath : '<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css',
uploadJson : '<%=request.getContextPath() %>/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
//注意修改這裏的form表單的名字
document.forms['nameForm'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['nameForm'].submit();
});
}
});
prettyPrint();
});
</script
4.運行項目,效果就出來了。web