Kind Editor 编辑器 图片上传

原创 2015年07月09日 10:34:32

KindEditor 编辑器 图片上传

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

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


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


前端js代码

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

前端html代码

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


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

  1. @RequestMapping("/imageUpload")  
  2.     @ResponseBody  
  3.     public String imageUpload(MultipartHttpServletRequest request) throws Exception {  
  4.         String webpath =  null;  
  5.         try {  
  6.             //上传图片  
  7.             MultipartFile file = request.getFile("imgFile");  
  8.             webpath = FileUtil.saveWebImgFile(file);  
  9.             if(StringUtils.isNotEmpty(webpath)){  
  10.                 String path = request.getContextPath();  
  11.                 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  12.                 webpath = "{\"error\" : 0,\"url\" : \""+basePath+webpath+"\"}";//成功  
  13.             }else{  
  14.                 webpath = "{\"error\" : 0,\"message\" : \"上传文件不存在\"}";//失败  
  15.             }  
  16.         }catch (Exception e) {  
  17.             e.printStackTrace();  
  18.         }  
  19.         return webpath;  
  20.     }  
版权声明:本文为博主http://www.feixueteam.net原创文章,未经博主允许不得转载。

相关文章推荐

markdown(editor.md)编辑器-图片上传

点击下载案例代码editor.md网站地址http://pandao.github.io/editor.md/首先需要引入对应的css跟js文件,jquery一定要在前面引入,大家可以去官网下载edi...

百度编辑器图片上传

  • 2017-08-08 11:32
  • 31.42MB
  • 下载

百度富文本编辑器UEditor的使用和他的图片上传

最近在做一个新闻发布系统的小项目,需要用到富文本编辑器这个东东,于是上网搜了下,白活两天给白活出来了,接下来谈谈我对百度富文本编辑器的使用心得: 要想使用这个富文本编辑器,首先呢得从百度官网上下载,文...

xhEditor在线编辑器学习笔记(1)---用Struts2+ajax实现图片上传

这段时间的业余时间一直忙于自己博客(http://www.dianfusoft.com/)的开发工作,特别是选择在线编辑器时不知道选择哪个好,因为第一次用这玩意儿。选择了那么多的编辑器,最后还是选择了...

react 中 使用 没有启用图片上传功能的simditor 富文本编辑器

react 中 使用 没有启用图片上传功能的simditor 富文本编辑器
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)