kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法

[导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下

富文本编辑器上传图片

一、导入kindeditor的js

二、将kindeditor与一个文本域textarea进行关联，即用textarea初始化一个kindeditor对象itemAddEditor=TAOTAO.createEditor("#itemAddForm[name=desc]");

//初始化类目选择和图片上传器

TAOTAO.init({fun:function(node){

TAOTAO.changeItemParam(node,"itemAddForm");

}});

三、设置要上传的参数varTT=TAOTAO={

//编辑器参数

kingEditorParams:{

//指定上传文件参数名称

filePostName:"uploadFile",

//指定上传文件请求的url。

uploadJson:'/pic/upload',

//上传类型，分别为image、flash、media、file

dir:"image"

},

init:function(data){

//初始化图片上传组件

this.initPicUpload(data);

//初始化选择类目组件

this.initItemCat(data);

},

//初始化图片上传组件

initPicUpload:function(data){

$(".picFileUpload").each(function(i,e){

var_ele=$(e);

_ele.siblings("div.pics").remove();

_ele.after('

//回显图片

if(data&&data.pics){

varimgs=data.pics.split(",");

for(variinimgs){

if($.trim(imgs[i]).length>0){

_ele.siblings(".pics").find("ul").append("

");

}

}

}

//给“上传图片按钮”绑定click事件

$(e).click(function(){

varform=$(this).parentsUntil("form").parent("form");

//打开图片上传窗口

KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){

vareditor=this;

editor.plugin.multiImageDialog({

clickFn:function(urlList){

varimgArray=[];

KindEditor.each(urlList,function(i,data){

imgArray.push(data.url);

form.find(".picsul").append("

");

});

form.find("[name=image]").val(imgArray.join(","));

editor.hideDialog();

}

});

});

});

});

服务端代码publicMapuploadPicture(MultipartFileuploadFile){

MapresultMap=newHashMap<>();

try{

//生成一个新的文件名

//去原始文件名

StringoldName=uploadFile.getOriginalFilename();

//生成新的文件名

//UUID.randomUUID();

StringnewName=IDUtils.genImageName();

newName=newName+oldName.substring(oldName.lastIndexOf("."));

StringimagePath=newDateTime().toString("/yyyy/MM/dd");

//上传图片

booleanresult=FtpUtil.uploadFile(FTP_ADDRESS,FTP_PORT,FTP_USERNAME,FTP_PASSWORD,FTP_BASE_PATH,

imagePath,newName,uploadFile.getInputStream());

System.out.println("result="+result);

if(!result){

resultMap.put("error",1);

resultMap.put("message","文件上传失败");

System.out.println("hh");

returnresultMap;

}

resultMap.put("error",0);

resultMap.put("url",IMAGE_BASE_PATH+imagePath+"/"+newName);

returnresultMap;

}catch(IOExceptione){

resultMap.put("error",1);

resultMap.put("message","文件上传异常");

returnresultMap;

}

}

注意：服务端返回的json串的格式{error: 0|1,message|url} 其中error为整型不为字符串，如果写成字符串图片能够正常上传至服务器，但是不能在浏览器中回显。