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原创文章,未经博主允许不得转载。

使用Spring MVC对KindEditor进行图片/Flash上传

KindEditor4Module.java Spring MVC的控制器 package cn.wonhigh.o2o.weixin.web; import java.io.File;...
  • yizhao1992
  • yizhao1992
  • 2014年07月07日 16:29
  • 2208

KindEditor使用SpringMVC改造,实现绝对路径上传

这里的绝对路径是指项目以外的某个固定路径
  • whos2002110
  • whos2002110
  • 2014年06月23日 16:38
  • 20166

从零基础认识KindEditor实现图片上传

KindEditor图片上传一般用户访问系统,使用上传图片功能,那么图片就上传到你的当前项目所在的tomcat服务器上,在/image下,上传成功后用户可以直接访问http://ip:port/pro...
  • qq_30258957
  • qq_30258957
  • 2017年12月09日 23:09
  • 581

使用kindeditor作为富文本编辑器,内容和图片的保存

使用ke作为富文本编辑器,感
  • clover_rui
  • clover_rui
  • 2014年06月04日 19:11
  • 2813

kindEditer富文本编辑器从前端到后台完整经验

引言:kindEditer是现在免费开源的富文本编辑器中很轻巧和实用的,所以在比较之后决定使用它来满足项目的需求。 下载:http://kindeditor.net/demo.php 导入:由于官...
  • qq_28912317
  • qq_28912317
  • 2017年06月29日 09:55
  • 886

KindEdit富文本编辑器小结

KindEdit富文本编辑器小结
  • jx950915
  • jx950915
  • 2017年09月20日 21:45
  • 403

KindEditor图片上传路径URL的处理

最近的项目中使用了KindEditor作为富文本编辑器进行文本编辑处理。KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEd...
  • yangjun19890825
  • yangjun19890825
  • 2013年07月02日 13:28
  • 8293

Kindeditor上传图片路径设置的一点经验

目录结构: 编辑器代码存放路径: Component/Kindeditor/ 编辑器调用路径: Plus/m_default/cms/default.php 上传文件的保存路径: Uplo...
  • asdf1213321
  • asdf1213321
  • 2013年03月12日 23:01
  • 22305

好用的vue图文编辑vue2-editor

请参考: https://github.com/davidroyer/vue2-editor 基本用法: 首先,使用npm安装 npm install --save vue2-editor 具体...
  • ziwoods
  • ziwoods
  • 2017年12月27日 13:46
  • 287

Kind Editor 编辑器 指定初始化模块

KindEditor 编辑器 指定初始化模块、 有时候,我们不需要那么多功能。 因此,我们就可以通过指定某些功能模块进行显示。 案例代码如下: var editor;...
  • u013948190
  • u013948190
  • 2015年07月09日 10:33
  • 256
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Kind Editor 编辑器 图片上传
举报原因:
原因补充:

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