Kindeditor的圖片上傳和圖片管理
引入先關文件
<!--引入kindeditor相關js,css-->
<script type="text/javascript" src="../../edit/kindeditor.js" ></script>
<link rel="stylesheet" href="../../edit/themes/default/default.css" />
<script type="text/javascript" src="../../edit/lang/zh_CN.js" ></script>
系統提供的默認實現
1.在頁面設置kindeditor的屬性,指定使用默認的JSP實現
- uploadJson : ‘../../editor/jsp/upload_json.jsp’,
必須配置:指定上傳文件程序的位置。 - allowFileManager:true,
可選,如果使用圖片管理器,進行設置 - fileManagerJson : ‘../../editor/jsp/file_manager_json.jsp’
設置圖片管理器的實現程序
2.將下載的kindeditor的有關JSP的默認實現複製到項目中
01 安裝文件\kindeditor\jsp 路徑下
Lib: 當前上傳文件依賴的jar
json_simple-1.1.jar 是kindeditor自己設置的一個JSON轉換包,必須導入
a)maven:
執行命令之前,需要配置maven_home,path。
到當前jar包所在的路徑下,執行:
mvn install:install-file -Dfile=json_simple-1.1.jar -DgroupId=com.kindeditor.json -DartifactId=kindeditor -Dversion=1.0 -Dpackaging=jar
b)將jar包複製到 WEB-INF/lib文件夾下
3.將剩下的JSP文件複製到editor目錄下
- upload_json.jsp JSP版的文件上傳
- file_manager_json.jsp JSP版的文件管理器
4.文件上傳的說明,
默認情況下,官方自帶的程序,將上傳的圖片按照日期保存在attached文件夾下
應該在項目中,手動創建該文件夾。
5.運行程序的tomcat插件必須是tomcat7
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.1</version>
<configuration>
<port>9001</port>
</configuration>
</plugin>
6.如果使用的是struts,要在web.xml中,將struts的攔截器配置爲:*.action
7.使用代碼
$(function(){
$("body").css({visibility:"visible"});
$("#back").click(function(){
location.href = "promotion.html";
});
//初始化kindeditor編輯器
var editor;
KindEditor.ready(function(K) {
editor = K.create('#description', {
items : [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
uploadJson : '../../edit/jsp/upload_json.jsp',
fileManagerJson : '../../edit/jsp/file_manager_json.jsp',
allowFileManager : true
});
});
});