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,如需转载请自行联系原作者


相关文章
|
6月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
122 0
|
4月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
5月前
|
JavaScript
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
这篇文章介绍了如何在Vue 2.X和Vue 3.X项目中封装和使用Monaco Editor在线代码编辑器,包括安装所需依赖、创建封装组件、在父组件中调用以及处理Vue 3中可能遇到的问题。
1011 1
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
|
5月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
5月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
4月前
一款非常棒的十六进制编辑器 —— 010 Editor
一款非常棒的十六进制编辑器 —— 010 Editor
|
6月前
|
JavaScript
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
405 0
|
6月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
7月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
84 5
|
7月前
|
Ubuntu 搜索推荐 Linux
Linux的Vim编辑器详解
Linux的Vim编辑器详解

热门文章

最新文章