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