在做類似新聞網站的web時候，我們需要對文章進行編輯，這個時候就會用到文本編輯器插件，在眾多文本編輯器插件中比較推薦kindeditor插件。下面具體說說這種插件的用法。
1.官網下載
2.選擇合適的內容到項目中kindeditor文件夾中，然后放到項目工程中去：
：
3.選擇使用的服務器
如圖：
打開image.js，將其中的如下代碼
改成需要的服務器處理文件，這里面改成upload_json.jsp。
4.在demo.jsp中進行配置
(1)引入如下文件：
<link rel="stylesheet" href="<%=path%>/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="<%=path%>/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%=path%>/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<%=path%>/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=path%>/kindeditor/plugins/code/prettify.js"></script>
(2)定義jsp中相應標簽，我們通常用textarea來存放文本編輯器中的值，如下：
<tr>
<td align="center">
<textarea name="content" id="content" cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;" ><%=htmlspecialchars(htmlData)%></textarea>
<br />
</td>
</tr>
(3)JS腳本中對其進行文本編輯器初始化:
<script>
var editor1;
KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="content"]', {
cssPath : '<%=path%>/kindeditor/plugins/code/prettify.css',
uploadJson : '<%=path%>/kindeditor/jsp/upload_json.jsp',//標識處理圖片的文件
fileManagerJson : '<%=path%>/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,//允許上傳文件和圖片
afterCreate : function() {
this.sync();
},
afterBlur:function(){
this.sync();
}
});
prettyPrint();
});
</script>
5.修改處理上傳圖片的代碼
upload_json.jsp是處理圖片的代碼，打開這個圖片，修改圖片保存路徑的代碼，如下：
//這里面我們將圖片保存在attached文件中，需要處理好該文件夾所在的路徑
String savePath = pageContext.getServletContext().getRealPath("/") + "/kindeditor/attached/";
//文件保存目錄URL
String saveUrl = path+"/kindeditor/attached/";
7.為tomcat添加lib
如下圖，將jsp的lib文件夾下的3個包放到tomcat的lib文件夾中
這樣子當打開jsp的時候就能正常顯示出本文編輯器了並且能正常處理圖片上傳了。
8.將文本編輯器的內容保存到數據庫中去:
$.ajax(
{
url: "dojkcytj.do?loginID="+window.parent.$("#loginID").val(),
data: {'content':editor1.html(),'type':$("#type").val(),'title':$("#title").val()},
type: "post",
cache : false,
success:function(responseText){
if(responseText == "0"){
alert("添加成功");
window.parent.$("#changePasswdDialog").dialog("close");
$("#btnSave").disabled = true;
$("#btnSave").hide();
return;
}
if(responseText == "1"){
alert("添加失敗");
window.parent.$("#changePasswdDialog").dialog("close");
$("#btnSave").disabled = true;
$("#btnSave").hide();
return;
}
},
error:function(){
alert("system error");
}
}
);
}
調用ajax方法，通過editor1.html()獲取文本編輯器內容，並把它復制給content，這樣后台只需要把content的內容存到數據庫中即可。由於文本編輯器內容可能較多，因此數據庫中用longtext類型來接收內容。這樣子。編輯器的內容就以html格式保存早數據中去了。
9.將數據庫中存儲的內容回顯到文本編輯器中
(1)將數據庫中的內容取出來放到Model實體類中，將實體類添加到JSP中。
(2)修改jsp中相應textarea內容，即可完成內容回顯，如下：
<tr>
<td align="center">
<textarea name="content" id="content" cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;" >${HZGS.content}</textarea>
<br />
</td>
</tr>
這樣子整個文本編輯器的內容保存和回顯就完成了。