KindEditor结合ssm框架使用

最新推荐文章于 2021-03-16 20:05:32 发布

ding_spring_autumn

最新推荐文章于 2021-03-16 20:05:32 发布

阅读量2.6k

点赞数 1

分类专栏：前端框架的使用文章标签：文本编辑 kindeditor ssm 文件上传多文件上传

本文链接：https://blog.csdn.net/ding_spring_autumn/article/details/53143022

版权

前端框架的使用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

介绍

最近项目中要用的文件上传的组件与富文本编辑器的使用。一直用的富文本编辑器是金山的KindEditor和百度的Ueditor。之前没有负责处理上传的业务逻辑，只是用的kindEditor的默认uploadjson.jsp.由于业务的变动。需要自己手动处理一下上传的服务端。废话不多说，今天先来介绍一下KindEditor的使用。之后会把Ueditor使用补上。

使用kindEditor的好处

srping-mvc给我们提供了文件上传的api，如果一个项目中只有一个文件上传的模块，参考spring-mvc 官方文档，可以在原始的from 标签中完成文档上传。但如果多个模块中都有文件上传的需要的话，每次都要负责处理文件上传的业务。程序显得臃肿，并且代码得不到重用。使用editor的思路是：使用前端js完成异步文件上传。等到文件上传结束后，将文件的保存路径利用json的格式输出到前端页面。前端将表单提交即可。

程序演示

首先访问文件上传的页面：http://localhost:8080/upload/uploadFile.jsp
界面如下：
这里写图片描述

点击文件上传按钮，弹出文件选择框。

这里写图片描述

点击上传后，开始上传文件。当文件上传完成后，会将文件的保存路径显示到文本框中。效果如下：

这里写图片描述

最后将该表单提交即可。如此便完成了表单提交与文件上传业务的代码隔离。

环境介绍
首先用kindeditor的官网中下载最新版的kindeditor版本，解压，导出到项目中去。在这里我将kindeditor进行了精简。如下图：

这里写图片描述

jsp界面代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 导入css -->
<link rel="stylesheet"
    href="/upload/kindeditor/themes/default/default.css" />
<!-- 导入核心js -->
<script src="/upload/kindeditor/kindeditor.js"></script>
<!-- 导入語言包 -->
<script src="/upload/kindeditor/lang/zh_CN.js"></script>

<script src="/upload/kindeditor/jquery.js"></script>
<script type="text/javascript">
    //初始化kindeditor组件
    KindEditor.ready(function(K) {
        var editor = K.editor({
            allowFileManager : true,
            uploadJson : '/upload/uploadController',//后台文件上传处理的路径
            filePostName : 'file'//文件的字段名，一会看到后台代码时会解释怎么使用
        });

        K('#image3').click(//为文件上传按钮绑定事件
                function() {
                    editor.loadPlugin('image', function() {//加载文件上传插件
                        editor.plugin.imageDialog({
                            showRemote : false,
                            imageUrl : K('#url3').val(),//获取本地文件路径:如:c:/doc/ccc.png文件
                            clickFn : function(url, title, width, height,
                                    border, align) {//当上传文件成功时的回调函数
                                K('#url3').val(url);//将路径回显
                                editor.hideDialog();//隐藏文件上传kuang
                            }
                        });
                    });
                });
    });
</script>
</head>
<body>
    <p>
        <input type="text" id="url3" value="" /> <input type="button"
            id="image3" value="选择文件" />
    </p>
</body>
</html>

文件上传后台代码：

@RequestMapping(value = "/uploadController", produces = { "application/json;charset=UTF-8" })
    @ResponseBody
    public Map<String, Object> upload(@RequestParam("file") MultipartFile file) {

        // 获取文件原始名称 :如：DSC_0058.JPG
        String originalFilename = file.getOriginalFilename();
        /**
         * 在这里可以负责处理文件上传的逻辑 如：为文件重命名，写到自定义的路径或者上传到ftp服务器等。 处理完文件上传后要通知前台上传的结果
         * 成功时json串： { "error" : 0, "url" : "http://www.example.com/path/to/file.ext"}
         * 失败时json串： { "error" : 1, "message" : "错误信息" }
         * 這裡我用map封裝了一下如下
         */
        Map<String, Object> result = new HashMap<>();
        result.put("error", 0);
        result.put("message", "上传成功");
        result.put("url", "/upload/kindeditor/editor.gif");
        return result;
    }

至此，文件单文件上传完成。

富文本编辑器的使用

运行效果如下：

前台界面：http://localhost:8080/upload/kindeditor.jsp

这里写图片描述

涉及到文件上传的有：

这里写图片描述

从左到右依次为：单文件上传，多文件上传，flash上传，视频上传，文件上传等。利用此插件，以及我们刚才的后台代码。可以把所有文件上传的业务交给一个controller来空中。做到一次编写，多次使用。

运行效果如下（显示多图片上传）

文件选择：

这里写图片描述

点击上传：

这里写图片描述

结果：

这里写图片描述

由于后台我们没有处理真正的业务上传逻辑，所以本次范围的是一个静态页面：

    result.put("url", "/upload/kindeditor/editor.gif");

也就说无论上传什么，返回的都是同一张图片哈哈。

下面粘上前台代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/upload/kindeditor/themes/default/default.css" />
        <script src="/upload/kindeditor/kindeditor.js"></script>
        <script src="/upload/kindeditor/lang/zh_CN.js"></script>
        <script src="/upload/kindeditor/jquery.js"></script>
        <script>
        KindEditor.ready(function(K) {//初始化editor
                window.editor = K.create('#editor_id',{//创建 editor
                    uploadJson:'/upload/uploadController',//设置文件上传coltroller路径
                    filePostName:'file',//字段名
                    imageSizeLimit:'10MB',//每个文件大小的限制
                    imageUploadLimit:40//每次可以上传多少个文件
                });
        });
</script>
</head>
<body>
<!--  editor 的显示区域 -->
<p><textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea></p>
</body>
</html>

参考链接：http://kindeditor.net/doc.php

ding_spring_autumn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
KindEditor结合ssm框架使用

介绍最近项目中要用的文件上传的组件与富文本编辑器的使用。一直用的富文本编辑器是金山的KindEditor和百度的Ueditor。之前没有负责处理上传的业务逻辑，只是用的kindEditor的默认uploadjson.jsp.由于业务的变动。需要自己手动处理一下上传的服务端。废话不多说，今天先来介绍一下KindEditor的使用。之后会把Ueditor使用补上。使用kindEditor的好处srpin
复制链接

扫一扫

专栏目录