KindEditor上传图片

关于KindEditor

（1）简介

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

（2）官方

官网：http://kindeditor.net/about.php

下载：http://kindeditor.net/down.php

文档：http://kindeditor.net/doc.php

本篇主要关于上传图片，结合Spring MVC处理文件上传。

1.初始化编辑器
配置可参照KindEditor文档：http://kindeditor.net/docs/upload.html文档中uploadJson属性配置的是…/kindeditor/jsp/upload_json.jsp，我们可以参照该jsp修改成对应ImageController处理图片上传，此时配置成‘/项目名/uploadKindEditorImg’

<body><textarea id="editor_id" name="editor_name" style="position:relative;width:100%;height:435px;visibility:hidden;"></textarea>
</body>


<script type="text/javascript">// 创建编辑器editor = KindEditor.create( "#editor_id", {resizeType : 1,allowImageUpload:true,//允许上传图片allowFileManager:true, //允许对上传图片进行管理uploadJson:root + '/uploadKindEditorImg',//上传图片接口filePostName: 'imgFile',// name属性默认值afterChange:function(){this.sync();},afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中afterBlur: function(){this.sync();},   失去焦点时，将上传内容同步到textarea中afterCreate : function() { this.sync();   },afterBlur:function(){  this.sync(); },items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image','table', 'hr', 'emoticons', 'baidumap', 'pagebreak','anchor', 'link', 'unlink'],allowFileManager: true});
</script>

2.处理图片上传Controller
（1）.上传图片时，前台提交文件的name属性默认是imgFile，所以使用@RequestParam(“imgFile”) MultipartFile imgFile进行绑定。拿到上传的文件后怎么处理根据业务需求进行即可。根据KindEditor文档，返回的Json数据：上传成功时{error:0, url:’…’}；上传失败{error:1, message:’…’}。

（2）.测试时上传到项目uploads目录下，返回图片路径时要加上相应的项目名，通过request.getServletContext().getContextPath()获取，返回的是’/项目名’

（3）.对文件的处理可以参照KindEditor的upload_json.jsp

（4）.返回的路径最好不包含中文，否则会有乱码问题

 @RequestMapping("/uploadKindEditorImg")@ResponseBodypublic KindEditorResult uploadImg(HttpServletRequest request, @RequestParam("imgFile") MultipartFile imgFile){KindEditorResult result = new KindEditorResult();try {// 获取绝对路径String realPath = request.getServletContext().getRealPath("/uploads");File imageFolder = new File(realPath); //查看是否有该文件夹if (!imageFolder.exists()) { //如果不存在imageFolder.mkdirs(); //创建该文件夹}//如果存在,将图片的名称重新命名String fileName = imgFile.getOriginalFilename();String suffixName = fileName.substring(fileName.lastIndexOf("."));String imageName= UUID.randomUUID()+suffixName;// 上传文件imgFile.transferTo(new File(realPath, imageName));result.setError(0);result.setUrl(realPath + "/" + imgFile.getOriginalFilename());result.setMessage("上传图片成功！");} catch (Exception e) {result.setError(1);result.setMessage("上传图片出错！");}return result;}

3.环境准备
（1）返回结果KindEditorResult

 private Integer error;// 0成功 1失败private String url;// 上传成功时路径private String message;// 上传失败时信息public Integer getError() {return error;}public void setError(Integer error) {this.error = error;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}

（2）文件上传需要引入commons-io.jar、commons-fileupload.jar、处理JSON相关的jar包，可以使用KindEditor提供的jar包（位于…/kindeditor/jsp/lib目录下）。项目使用的是Spring MVC，直接使用了Jackson处理JSON，则可以不导入json-simple.jar。Maven依赖如下：

<!-- KindEditor -->
<dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version>
</dependency>
<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version>
</dependency>
<!-- Jackson -->
<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.4.2</version>
</dependency>
<!-- json-simple -->
<dependency><groupId>com.googlecode.json-simple</groupId><artifactId>json-simple</artifactId><version>1.1</version>
</dependency>

参考链接：
1.https://blog.csdn.net/mytt_10566/article/details/78066987
2.https://www.cnblogs.com/gfbzs/p/12269768.html

KindEditor上传图片相关推荐

(转）淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题
http://blog.csdn.net/yerenyuan_pku/article/details/72808229 上文我们已实现了图片上传功能,但是有个问题,那就是对浏览器兼容性不够,因为Map ...
PHP 编辑器 kindEditor 上传图片失败解决方案
这个坑是原始巨坑,刚学PHP出来的时候,为这个问题鏖战了好几天,含泪将解决方案写出来,希望能帮到你们问题 PHP 编辑器 kindEditor上传图片失败解决方案打开 kindEditor 的 ...
kindeditor 上传图片失败问题总结
1.近段时间一直在处理kindeditor上传图片失败的问题,前期一直以为是前端的问题,利用谷歌控制台,打断点,修改方法,一直都找不到解决方案,直到查看服务器配置,才发现: WEB 1号服务器 /da ...
记录vue使用KindEditor上传图片发生的iframe跨域的错误
记录KindEditor上传图片时候发生的错误:Blocked a frame with origin "http://localhost:8080" from accessing ...
kindeditor上传图片php,Kindeditor编辑器添加图片上传水印功能（php代码）
KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框.可以无缝地与 Java..NET.PH ...
django23:BS4/kindeditor上传图片
BS4 Beautiful Soup,Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式. 安装 ...
kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法
[导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下富文本编辑器上传图片一.导入kindeditor的js 二.将kindeditor与一个文本域textar ...
kindeditor 上传图片返回带当前网址的图片地址
在编辑器初始化的时候加上urlType : 'domain', var editor; KindEditor.ready(function(K) {editor = K.create('textar ...
kindeditor上传图片后自动缩放尺寸
放便 <link rel="stylesheet" href="kindeditor/themes/default/default.css" /> ...
KindEditor上传图片后回调传入文本框和列表框并显示图片
KindEditor编辑器本地上传图片文件后(单个图片上传和批量图片上传),将数据回调,以实现自由设置任何一张图片做为文章形象图且在指定区域展示此形象图的功能. 以下是KindEditor 4.1.1 ...

KindEditor上传图片

KindEditor上传图片相关推荐

最新文章

热门文章