kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法
[导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下
富文本编辑器上传图片
一、导入kindeditor的js
二、将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个kindeditor对象itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
//初始化类目选择和图片上传器
TAOTAO.init({fun:function(node){
TAOTAO.changeItemParam(node, "itemAddForm");
}});
三、设置要上传的参数var TT = 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){
var imgs = data.pics.split(",");
for(var i in imgs){
if($.trim(imgs[i]).length > 0){
_ele.siblings(".pics").find("ul").append("
");
}
}
}
//给“上传图片按钮”绑定click事件
$(e).click(function(){
var form = $(this).parentsUntil("form").parent("form");
//打开图片上传窗口
KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
var editor = this;
editor.plugin.multiImageDialog({
clickFn : function(urlList) {
var imgArray = [];
KindEditor.each(urlList, function(i, data) {
imgArray.push(data.url);
form.find(".pics ul").append("
");
});
form.find("[name=image]").val(imgArray.join(","));
editor.hideDialog();
}
});
});
});
});
服务端代码public Map uploadPicture(MultipartFile uploadFile) {
Map resultMap=new HashMap<>();
try {
//生成一个新的文件名
//去原始文件名
String oldName=uploadFile.getOriginalFilename();
//生成新的文件名
//UUID.randomUUID();
String newName=IDUtils.genImageName();
newName=newName+oldName.substring(oldName.lastIndexOf("."));
String imagePath=new DateTime().toString("/yyyy/MM/dd");
//上传图片
boolean result=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");
return resultMap;
}
resultMap.put("error", 0);
resultMap.put("url", IMAGE_BASE_PATH + imagePath + "/" + newName);
return resultMap;
} catch (IOException e) {
resultMap.put("error", 1);
resultMap.put("message", "文件上传异常");
return resultMap;
}
}
注意:服务端返回的json串的格式{error: 0|1,message|url} 其中error为整型不为字符串,如果写成字符串图片能够正常上传至服务器,但是不能在浏览器中回显。
kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法相关推荐
- JavaWeb-10 (项目案例7 文件上传与富文本编辑器)
一.Web文件上传与下载 ① 概述 将本地文件上传到服务器端,从服务器端下载文件到本地的过程.例如目前网站需要上传头像.上传下载图片或网盘等功能都是利用文件上传下载功能实现的. ② 原理 (1) 文件 ...
- 在线 - 支持word上传的富文本编辑器
这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...
- 结合element-ui实现文件上传以及富文本编辑器的使用
一.配置文件上传两个注意事项 1.action属性必须是绝对路径 2.手动配置请求头headers 完整代码: <el-uploadaction="http://www.ysqorz. ...
- 百度ueditor - 支持word上传的富文本编辑器
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
- PS修改过图片上传服务器,富文本编辑器图片上传base64存数据库改为服务器图片路径...
目录 一.安装依赖 npm install quill-image-super-solution-module --save PS:如果不想npm引入可以直接把quill-image-super-so ...
- wangEditor - 支持word上传的富文本编辑器
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
- kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- easyUI整合富文本编辑器KindEditor详细教程
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- 富文本编辑器 Kindeditor 的使用和 常见错误
富文本编辑器 Kindeditor 的使用和 常见错误 错误一 问题描述:批量图片上传弹窗中 没有添加图片按钮 原因以及解决:按钮资源(.swf)被拦截 错误二 问题描述:图片上传失败 原因分析:批量 ...
最新文章
- 深度学习已经彻底改变了制造业的质量控制,但还不够深入
- APC UPS网络管理卡 (AP9606/9617/9618/9619)的快速安装及配置指南
- python列表按照指定顺序排序-Python3实现对列表按元组指定列进行排序的方法分析...
- python做小程序-抖音最火的整蛊表白小程序如何做出来的?教你用python做出
- android 继承dialog自定义对话框
- Bamboo 0.2.11 发布,HAProxy 自动配置
- 引力子与黑格斯粒子是否超对称
- 科大讯飞 离线语音识别python_用Python来使用科大讯飞语音识别,so easy
- 群晖 kodi mysql,用群晖为 Kodi 注入多设备同步能力
- VTN_Virtual Tenant Network——虚拟租赁网络
- choose标签使用
- 英文版红帽linux设置屏保,Linux下屏保设置
- GPS RTK测量定位原理
- Summer School实验
- WMI 测试器 (wbemtest.exe) 演练
- 如何招到一个靠谱的程序员,以及如何应对面试题
- 逻辑回归 — Sigmoid函数 —预测是否出现过交通事故
- 原始投资100美元,C语言实现单利息投资和复合利息投资
- lol服务器位置地图,LOL老玩家一定能看懂的地图 每一个地点都充满回忆
- 制作一个“生日快乐”App,来自程序员的生日礼物~