Kind Editor 编辑器 图片上传

简介:

KindEditor 编辑器 图片上传

最近接触到了html文本的存储。 以前没有涉及这么全面的html + 图片 上传。

今天用KindEditor 做了一些功能。 我的项目用spring mvc+mybatis 整的。


贴出我的前端和后端代码 。供新手参考。 不用多余jar。 跟普通上传图片差不多。


前端js代码

var editor; 		KindEditor.ready(function(K) { 			var editor = K.create('textarea[name="Description"]', { 				uploadJson : 'kingedit/imageUpload',上传图片的地址 			}); 			 			 		});

前端html代码

<textarea rows="5" cols="70" name="Description"></textarea> 		   		


后端上传图片代码,注意,编辑器必须接收到返回的json。

@RequestMapping("/imageUpload") 	@ResponseBody 	public String imageUpload(MultipartHttpServletRequest request) throws Exception { 		String webpath =  null; 		try { 			//上传图片 			MultipartFile file = request.getFile("imgFile"); 			webpath = FileUtil.saveWebImgFile(file); 			if(StringUtils.isNotEmpty(webpath)){ 				String path = request.getContextPath(); 				String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 				webpath = "{\"error\" : 0,\"url\" : \""+basePath+webpath+"\"}";//成功 			}else{ 				webpath = "{\"error\" : 0,\"message\" : \"上传文件不存在\"}";//失败 			} 		}catch (Exception e) { 			e.printStackTrace(); 		} 		return webpath; 	}




      本文转自yjflinchong 51CTO博客,原文链接:http://blog.51cto.com/yjflinchong/1164954,如需转载请自行联系原作者


相关文章
|
3月前
|
JavaScript 前端开发
在 Vue 2 中安装和使用 mavon-editor富文本编辑器
在 Vue 2 中安装和使用 mavon-editor富文本编辑器
81 0
|
4月前
|
存储 前端开发 JavaScript
医院电子病历编辑器,EMRE(EMR Editor)源码
医院电子病历编辑器,EMRE(EMR Editor)源码
66 0
|
4月前
|
缓存 资源调度 小程序
微信小程序(二十五)微信小程序富文本编辑器editor上传图片
一般在做网站开发的时候,最开始使用的一般都是百度的ueditor,但是这个玩意好久不更新了,功能到时够用,就是UI以及其他的一些套件的视觉效果稍差。
82 0
|
7月前
UE中创建异步任务编辑器工具(Editor Utility Tasks)
UE中创建异步任务编辑器工具(Editor Utility Tasks)
116 0
UE中创建异步任务编辑器工具(Editor Utility Tasks)
|
7月前
|
编解码
UE中使用Editor Utility Widget创建编辑器工具
UE中使用Editor Utility Widget创建编辑器工具
195 0
UE中使用Editor Utility Widget创建编辑器工具
|
存储 前端开发
#yyds干货盘点 【React工作记录二十九】react中使用的富文本编辑器braft-editor使用
#yyds干货盘点 【React工作记录二十九】react中使用的富文本编辑器braft-editor使用
119 0
#yyds干货盘点 【React工作记录二十九】react中使用的富文本编辑器braft-editor使用
|
IDE 安全 前端开发
Win11系统下安装编辑器之神(The God of Editor)Vim并且构建Python生态开发环境
众神殿内,依次坐着Editplus、Atom、Sublime、Vscode、JetBrains家族、Comodo等等一众编辑器界的大佬们,偌大的殿堂内几无立锥之地,然而在殿内的金漆雕龙宝座上,端坐着一位睥睨众生的王者,那就是被称之为编辑器之神的Vim,作为一个有着30余年历史的老牌神器,没有任何编辑器可以和它媲美,其时江湖有云:神编Vim不会玩,纵称大神也枉然。Vim在 1976 年发布,奉行 Unix 传统的“Do one thing and do it well”哲学,每个程序只做一件事但求做到最好,通过程序之间的配合得到强大的功能,其两种模式(Normal/Insert) 的玄妙变换,幻
Win11系统下安装编辑器之神(The God of Editor)Vim并且构建Python生态开发环境
|
存储 图形学 索引
Unity 编辑器开发实战【Custom Editor】- FSM Editor
Unity 编辑器开发实战【Custom Editor】- FSM Editor
257 0
Unity 编辑器开发实战【Custom Editor】- FSM Editor
|
1月前
|
存储 Linux 编译器
vim编辑器和gcc/g++编辑器的使用讲解
vim编辑器和gcc/g++编辑器的使用讲解
53 2
|
1月前
|
Linux 编译器 开发工具
Linux:详解(yum的使用、vim编辑器命令集合以及gcc/g++编译器的使用)
Linux:详解(yum的使用、vim编辑器命令集合以及gcc/g++编译器的使用)
119 1