码迷,mamicode.com
首页 > Web开发 > 详细

关于kindeditor-4.1.7的上传图片使用

时间:2016-06-12 18:21:11      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:

基于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数据类型

关于kindeditor-4.1.7的上传图片使用

标签:

原文地址:http://www.cnblogs.com/FWebApp/p/5578145.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!