KindEditor上传图片

最新推荐文章于 2024-04-27 09:13:51 发布

初生的太阳丶

最新推荐文章于 2024-04-27 09:13:51 发布

阅读量3.9k

点赞数

分类专栏： java spring 文章标签：编辑器 java

本文链接：https://blog.csdn.net/Strive279/article/details/121250542

版权

java 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

spring

6 篇文章 1 订阅

订阅专栏

关于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")
    @ResponseBody
    public 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

初生的太阳丶

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
KindEditor上传图片

KindEditor相关介绍以及下载可查看http://blog.csdn.net/mytt_10566/article/details/78062205。本篇主要关于上传图片，结合Spring MVC处理文件上传。1.初始化编辑器配置可参照KindEditor文档：http://kindeditor.net/docs/upload.html文档中uploadJson属性配置的是…/kindeditor/jsp/upload_json.jsp，我们可以参照该jsp修改成对应ImageControlle
复制链接

扫一扫