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

kindeditor4.1.10图片上传配置及使用说明

1.1 点击图片上传按钮 1.2 弹出选择框,可以从已上传的图片中选择上传,也可以从本地上传。 1.3选择从图片空间上传,文件夹模式浏览所有已上传的图片 1.4从本地选择图片上传 1...

KindEditor上传本地图片

自己动手配置了一下KindEditor文本编辑器上传本地图片的功能,不需要动手写action,相关详细配置和代码如下。...

KindEditor简单版实战(1)图片本地上传

项目需求是:为整个项目提供帮助,所以

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

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

vue-quill-editor自定义图片上传

我们通常都会使用富文本编辑器在后台编辑内容,开发vue当然也少不了,我们通过vue官网的链接可以找到一些资源,或者去github上查找一些开源的编辑器。 我使用的是vue-quill-editor,...

vue-quill-editor自定义图片上传

我们通常都会使用富文本编辑器在后台编辑内容,开发vue当然也少不了,我们通过vue官网的链接可以找到一些资源,或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor,它的...

vue-quill-editor自定义图片上传

我们通常都会使用富文本编辑器在后台编辑内容,开发vue当然也少不了,我们通过vue官网的链接可以找到一些资源,或者去github上查找一些开源的编辑器。 我使用的是vue-quill-editor,它...

百度编辑器图片上传

  • 2017年08月08日 11:32
  • 31.42MB
  • 下载

kindeditor编辑器和图片上传独立分开的配置细节

关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Kind Editor 编辑器 图片上传
举报原因:
原因补充:

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