时间:2021-05-25
富文本编辑器上传图片
一、导入kindeditor的js
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script><script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>二、将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('\ <div class="pics">\ <ul></ul>\ </div>'); // 回显图片 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("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>"); } } } //给“上传图片按钮”绑定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("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>"); }); 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为整型不为字符串,如果写成字符串图片能够正常上传至服务器,但是不能在浏览器中回显。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
结合vue+element-ui+vue-quill+editor二次封装成组件1.图片上传分析原因项目中使用vue-quill-editor富文本编辑器,在编
当前开发项目涉及到富文本框,了解了不少富文本编辑器之后,最终决定使用度娘的UEditor。原因:功能强大,并且自带适配java后端的图片和视频上传。项目地址不多
CKEditor富文本编辑器很好用,功能很强大,在加上支持服务端图片上传的CKFinder更是方便,最近在使用CKFinder的时候发现存在很多问题,比如上传图
由于手机上打字比较慢,并不适合长篇大论的文章,所以移动端的富文本编辑器很少。artEditor是一款基于jQuery的移动端富文本编辑器,支持插入图片,后续完善
本文实例讲述了微信小程序整合使用富文本编辑器的方法。分享给大家供大家参考,具体如下:使用WxParse插件实现小程序的富文本显示,下载地址:富文本插件WxPar