[1]下載kindeditor壓縮包
下載地址 :http://kindeditor.googlecode.com/files/kindeditor-4.1.9.zip
[2]在項目中引入kindeditor文件夾,如下圖:
[3]在頁面中如edit.jsp中引入kindeditor.js
<script type="text/javascript" charset="UTF-8" src="../js/jquery-1.4.2.min.js"></script><script charset="utf-8" src="../common/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="../common/kindeditor/lang/zh_CN.js"></script>
[4]創建一個textarea,如下:
<td width="15%" height="28">內容<span style="color: red">*</span></td>
<td height="35" colspan="3">
<textarea id="PCONTENT" name="PCONTENT" rows="60"
style="width:90%; margin:0 auto; background:url(../images/biaodan/textarea_bg.gif) repeat-x #fff; border:1px solid #CDCDCD; overflow:auto;">
</textarea>
</td>
[5]在頁面加載完成后,出事后編輯器
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#PCONTENT');
});
</script>
至此,kindeditor就能生效了。
如果運行正常,效果如下:
但是,如果你不是用php開發系統的話,那么,你的圖片上傳是不能使用的,因為kindeditor中默認的使用的是php作為action。
下面說明文件上傳的配置:(以jsp開發為例)
[6]在plugin/image.js中修改,上傳處理的action路徑
找到選中的部分
替換成:
這樣就是用jsp/upload_json.jsp來處理文件的上傳。[7]配置上傳文件路徑
打開jsp/upload_json.jsp文件,找到如下位置:
配置為你對應的目錄即可,注意文件保存路徑和訪問路徑的一致性。
當然,這個目錄需要在context下面,注意路徑就可以了。
圖片上傳功能,其實不用配置也可以實現,就是在編輯器初始化時,直接設置,如下:
KindEditor.ready(function(K) {根據需要配置upload_json.jsp中的文件的文件上傳路徑,如果用默認的,需要在應用的根目錄下面創建attached目錄。
window.editor = K.create('#PCONTENT',{
uploadJson:'../common/kindeditor/jsp/upload_json.jsp',
fileManagerJson:'../common/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true
});
});
如果配置量文件上傳的路徑,需要注意upload_json.jsp和file_manager_json.jsp兩個文件中配置的一致性。
|----------------------------------------------------------------------------------------|
版權聲明 版權所有 @zhyiwww
引用請注明來源 http://www.aygfsteel.com/zhyiwww
|----------------------------------------------------------------------------------------|