關於kindeditor-4.1.7的上傳圖片使用

基於jfinal框架的kindeditor+freemarker前端編輯器開發

須要注意的是因爲用到freemarker反饋地址，因此必須把初始化kindeditor代碼寫入到html頁面，不然上傳圖片路徑取不到當前系統地址。

上傳圖片可右擊選擇圖片屬性，更改圖片的大小和在文章中的樣式。

html的代碼（關鍵代碼）：

<script type="text/javascript" charset="utf-8" src="${base}/resources/kindeditor-4.1.7/kindeditor.js"></script>
<script charset="utf-8" src="${base}/resources/kindeditor-4.1.7/lang/zh_CN.js"></script>

<form class="form-horizontal" id="addInfor" action="${base!}/show/editBussInfor" method="post" >

<textarea enctype="multipart/form-data" class="TextBox Required" style="width: 300px;height:300px;"  name="veVenue.venue_brief" id="venue_brief" >${infor.informationContent!}</textarea>

</form>

<script type="text/javascript">
$(function () {
　　$('[data-toggle="popover"]').popover();
});
var options = {
　　filterMode : false,
　　items : ['source', '|', 'undo', 'redo', '|', 'preview','cut', 'copy', 'paste',
　　'plainpaste', 'wordpaste', '|','justifyleft', 'justifycenter','justifyright','justifyfull', '|',
　　'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
　　'superscript', 'clearhtml', 'quickformat', 'selectall', '|',
　　'formatblock', 'fontname', 'fontsize', '|','forecolor', 'hilitecolor' ,'|',
　　'bold', 'italic','underline','fullscreen','image','strikethrough', 'lineheight', 'removeformat', '|',
　　'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
　　'anchor', 'link', 'unlink', '|', 'about'
　　],
　　afterBlur : function() {
　　　　this.sync();
　　},
　　themeType : 'oschina',
　　resizeType : 1,
　　shadowMode : true,//彈框是否有陰影
　　allowPreviewEmoticons : false,
　　allowUpload : true, //容許上傳圖片
　　allowImageUpload : true,
　　allowImageRemote : true,
　　uploadJson : '${base!}/img/uploadMap?mapType=2'//上傳路徑
};

KindEditor.ready(function(K) {
　　window.editor = K.create('#venue_brief', options);
});
</script>

 

--------------------------------------------------------------------------------------

上傳圖片後臺代碼（存到數據庫中）：

只放上傳相關代碼

/**
* 帶參數傳遞測試
* @throws IOException
*/
public void uploadMap() throws IOException{
　　UploadFile uploadFile = getFile();
　　String mapType = this.getPara("mapType");

　　String mapCode= "";//初始化圖片id

　　//取到文件保存
　　if(uploadFile!=null){
　　byte[] bs = FileHelper.toBytes(uploadFile.getFile());
　　String nameImg = uploadFile.getFileName();
　　String[] strs=nameImg.split("\\.");
　　mapCode = strs[0];

　　//檢測數據庫裏圖片的id是否已經存在
　　MapService imgSer = new MapService();
　　EbMapFile img = imgSer.findMapFile(mapCode);
　　if(img == null){
　　　　img = new EbMapFile();
　　　　//創建文件路徑
　　　　File dirFile = new File(MCubeAppConfig.getInstance().getImagUrl());
　　if(!dirFile.exists()){
　　　　dirFile.mkdirs();
　　}

　　File desFile = new File(dirFile, mapCode);//定義文件名
　　boolean success = false;
　　try {
　　　　success = uploadFile.getFile().renameTo(desFile);//jfinal批量上傳文件時重命名
　　　} catch (Exception e) {
　　　　e.printStackTrace();
　　}
　　setAttr("error", success ? 0 : 1);//返回給kindeditor編輯器
　　if(success){
　　　　img.set("map_id", "EB_MAP_seq.nextval");
　　　　img.set("map_code", mapCode);
　　　　img.set("map_type", new BigDecimal(mapType));//圖片類型，1爲中心地圖，2爲資訊圖片
　　　　img.set("map_CONTEN",bs);
　　　　String mapUrl = MCubeAppConfig.getInstance().baseUrl +"/img/iconMap?imgName="+mapCode;
　　　　img.setMapUrl(mapUrl);
　　　　setAttr("url", mapUrl);//返回給kindeditor編輯器
　　　　if(img.save()){
　　　　　　setAttr("message", "上傳成功");
　　　　　　}
　　　　}else{
　　　　　　setAttr("message", "上傳失敗");
　　　　}　　
      }
　　}
　　setAttr("imgName",mapCode);
　　render(new JsonRender().forIE());
}

/**
* 添加
*/
public void addCenterInfor(){
　　String content = this.getPara("veVenue.venue_brief");//取得kindeditor內容

　　EbInformation infor = new EbInformation();

　　infor.set("INFORMATION_CONTENT",content);//數據庫中該字段爲clob或者glob數據類型

｝