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

｝

转载于:https://www.cnblogs.com/FWebApp/p/5578145.html