springmvc+kindeditor使用

最新推荐文章于 2024-05-13 18:34:28 发布
最新推荐文章于 2024-05-13 18:34:28 发布
阅读量1.7k 收藏 5
点赞数
分类专栏： spring 前端 文章标签： kindeditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shihua0610/article/details/77183262
版权
  1. 下载kindeditor： http://kindeditor.net/down.php

  2. 压缩包里面的jar放到tomcat的lib文件夹下，kindeditor文件放工程里，不用的可以删掉
    这里写图片描述

    jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<link rel="stylesheet"
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
    src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./kindeditor/kindeditor-all-min.js"></script>
<script src="./kindeditor/lang/zh-CN.js"></script>
<script>
    KindEditor
            .ready(function(K) {
                window.editor = K
                        .create(
                                '#editor_id',
                                {
                                    uploadJson : 'Kindeditor/uploadFile',
                                    fileManagerJson : 'Kindeditor/fileManager',
                                    allowImageUpload : true, //多图上传
                                    allowFileManager : true, //浏览图片空间
                                    filterMode : false, //HTML特殊代码过滤
                                    afterBlur : function() {
                                        this.sync();
                                    }, //编辑器失去焦点(blur)时执行的回调函数（将编辑器的HTML数据同步到textarea）
                                    afterUpload : function(url, data, name) { //上传文件后执行的回调函数，必须为3个参数
                                        if (name == "image"
                                                || name == "multiimage") { //单个和批量上传图片时
                                            if (K("#pic").length > 0) { //文本框存在
                                                document
                                                        .getElementById('piclist').options[document
                                                        .getElementById('piclist').length] = new Option(
                                                        url, url); //下拉列表框增加一条
                                                document
                                                        .getElementById('piclist').selectedIndex += 1; //选定刚新增的这一条
                                                K("#indexpicimg")
                                                        .html(
                                                                "<img src='" + url + "' width='150' height='95' />"); //重置图片展示区DIV的HTML内容
                                                K("#pic").val(url); //重置文本框值
                                            }
                                        }
                                    }
                                });
            });
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form class="form-horizontal" role="form"  action="articleAdd" method="post" >
        <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">标题</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="title" name="title"
                    placeholder="请输入标题">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">类别</label>
            <div class="col-sm-3">
                <select class="form-control" name="categoryId">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">内容</label>
            <div class=" col-sm-5">
                <textarea id="editor_id" name="details"
                    class="form-control" >
                &lt;strong&gt;HTML内容&lt;/strong&gt;
                </textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">保存草稿</button>
            </div>
        </div>
    </form>

</body>
</html>

KindAction.java

package com.leo.ows.action;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Comparator;
import java.util.HashMap;
import java.util.Hashtable;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.alibaba.fastjson.JSONObject;
@Controller
public class KindAction {

    @RequestMapping(value ="/Kindeditor/uploadFile", method = RequestMethod.POST)  
    public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception {  
        PrintWriter writer = response.getWriter();  
        // 文件保存目录路径  
        String savePath = request.getSession().getServletContext().getRealPath("/") + "upload/image" + File.separatorChar  
                 + File.separatorChar; 

        String saveUrl = request.getContextPath()+ File.separatorChar + "upload/image" + File.separatorChar  
               + File.separatorChar;  

        // 定义允许上传的文件扩展名  
        HashMap<String, String> extMap = new HashMap<String, String>();  
        extMap.put("image", "gif,jpg,jpeg,png,bmp");  

        // 最大文件大小  
        long maxSize = 1000000;  
        response.setContentType("text/html; charset=UTF-8");  

        if (!ServletFileUpload.isMultipartContent(request)) {  
            writer.println(getError("请选择文件。"));  
            return;  
        }  

        File uploadDir = new File(savePath);  
        // 判断文件夹是否存在,如果不存在则创建文件夹  
        if (!uploadDir.exists()) {  
            uploadDir.mkdirs();  
        }  

        // 检查目录写权限  
        if (!uploadDir.canWrite()) {  
            writer.println(getError("上传目录没有写权限。"));  
            return;  
        }  

        String dirName = request.getParameter("dir");  
        if (dirName == null) {  
            dirName = "image";  
        }  
        if (!extMap.containsKey(dirName)) {  
            writer.println(getError("目录名不正确。"));  
            return;  
        }  

        MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;  
        Map<String, MultipartFile> fileMap = mRequest.getFileMap();  
        String fileName = null;  
        for (Iterator<Map.Entry<String, MultipartFile>> it = fileMap.entrySet().iterator(); it.hasNext();) {  
            Map.Entry<String, MultipartFile> entry = it.next();  
            MultipartFile mFile = entry.getValue();  
            fileName = mFile.getOriginalFilename();  
            // 检查文件大小  
            if (mFile.getSize() > maxSize) {  
                writer.println(getError("上传文件大小超过限制。"));  
                return;  
            }  
            String fileExt = fileName.substring(fileName.lastIndexOf(".")+1);  
            if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {  
                writer.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));  
                return;  
            }  
            UUID uuid = UUID.randomUUID();  
            String path = savePath + uuid.toString() +"."+ fileExt;  
            saveUrl = saveUrl  + uuid.toString() +"."+ fileExt;  
            BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(path));  
            FileCopyUtils.copy(mFile.getInputStream(), outputStream);  

            JSONObject obj = new JSONObject();  
            obj.put("error", 0);  
            obj.put("url", saveUrl);  
            writer.println(obj.toString());  

        }  
    }  


    private String getError(String message) {  
        JSONObject obj = new JSONObject();  
        obj.put("error", 1);  
        obj.put("message", message);  
        return obj.toString();  
    } 

    @RequestMapping(value = "/Kindeditor/fileManager", method = RequestMethod.GET)  
    public void fileManager(HttpServletRequest request, HttpServletResponse response) throws Exception { 
        //根目录路径，可以指定绝对路径，比如 /var/www/attached/
        String rootPath =  request.getSession().getServletContext().getRealPath("/")+ "upload/";
        //根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
        String rootUrl  = request.getContextPath() + "/upload/";
        //图片扩展名
        String[] fileTypes = new String[]{"gif", "jpg", "jpeg", "png", "bmp"};
        System.out.println(rootPath);
        String dirName = request.getParameter("dir");
        if (dirName != null) {
            if(!Arrays.<String>asList(new String[]{"image", "flash", "media", "file"}).contains(dirName)){
                System.out.println("Invalid Directory name.");
                return;
            }
            rootPath += dirName + "/";
            rootUrl += dirName + "/";
            File saveDirFile = new File(rootPath);
            if (!saveDirFile.exists()) {
                saveDirFile.mkdirs();
            }
        }
        //根据path参数，设置各路径和URL
        String path = request.getParameter("path") != null ? request.getParameter("path") : "";
        String currentPath = rootPath + path;
        String currentUrl = rootUrl + path;
        String currentDirPath = path;
        String moveupDirPath = "";
        if (!"".equals(path)) {
            String str = currentDirPath.substring(0, currentDirPath.length() - 1);
            moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0, str.lastIndexOf("/") + 1) : "";
        }

        //排序形式，name or size or type
        String order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";

        //不允许使用..移动到上一级目录
        if (path.indexOf("..") >= 0) {
            System.out.println("Access is not allowed.");
            return;
        }
        //最后一个字符不是/
        if (!"".equals(path) && !path.endsWith("/")) {
            System.out.println("Parameter is not valid.");
            return;
        }
        //目录不存在或不是目录
        File currentPathFile = new File(currentPath);
        if(!currentPathFile.isDirectory()){
            System.out.println("Directory does not exist.");
            return;
        }

        //遍历目录取的文件信息
        List<Hashtable> fileList = new ArrayList<Hashtable>();
        if(currentPathFile.listFiles() != null) {
            for (File file : currentPathFile.listFiles()) {
                Hashtable<String, Object> hash = new Hashtable<String, Object>();
                String fileName = file.getName();
                if(file.isDirectory()) {
                    hash.put("is_dir", true);
                    hash.put("has_file", (file.listFiles() != null));
                    hash.put("filesize", 0L);
                    hash.put("is_photo", false);
                    hash.put("filetype", "");
                } else if(file.isFile()){
                    String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
                    hash.put("is_dir", false);
                    hash.put("has_file", false);
                    hash.put("filesize", file.length());
                    hash.put("is_photo", Arrays.<String>asList(fileTypes).contains(fileExt));
                    hash.put("filetype", fileExt);
                }
                hash.put("filename", fileName);
                hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));
                fileList.add(hash);
            }
        }

        if ("size".equals(order)) {
            Collections.sort(fileList, new SizeComparator());
        } else if ("type".equals(order)) {
            Collections.sort(fileList, new TypeComparator());
        } else {
            Collections.sort(fileList, new NameComparator());
        }
        JSONObject result = new JSONObject();
        result.put("moveup_dir_path", moveupDirPath);
        result.put("current_dir_path", currentDirPath);
        result.put("current_url", currentUrl);
        result.put("total_count", fileList.size());
        result.put("file_list", fileList);
        response.setContentType("application/json; charset=UTF-8");
        System.out.println(result.toJSONString());
        PrintWriter writer=response.getWriter();
        writer.println(result);
    }


    public class NameComparator implements Comparator {
        public int compare(Object a, Object b) {
            Hashtable hashA = (Hashtable)a;
            Hashtable hashB = (Hashtable)b;
            if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
                return -1;
            } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
                return 1;
            } else {
                return ((String)hashA.get("filename")).compareTo((String)hashB.get("filename"));
            }
        }
    }
    public class SizeComparator implements Comparator {
        public int compare(Object a, Object b) {
            Hashtable hashA = (Hashtable)a;
            Hashtable hashB = (Hashtable)b;
            if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
                return -1;
            } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
                return 1;
            } else {
                if (((Long)hashA.get("filesize")) > ((Long)hashB.get("filesize"))) {
                    return 1;
                } else if (((Long)hashA.get("filesize")) < ((Long)hashB.get("filesize"))) {
                    return -1;
                } else {
                    return 0;
                }
            }
        }
    }
    public class TypeComparator implements Comparator {
        public int compare(Object a, Object b) {
            Hashtable hashA = (Hashtable)a;
            Hashtable hashB = (Hashtable)b;
            if (((Boolean)hashA.get("is_dir")) && !((Boolean)hashB.get("is_dir"))) {
                return -1;
            } else if (!((Boolean)hashA.get("is_dir")) && ((Boolean)hashB.get("is_dir"))) {
                return 1;
            } else {
                return ((String)hashA.get("filetype")).compareTo((String)hashB.get("filetype"));
            }
        }
    }

}

效果图
这里写图片描述

華leo
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于ASP.NET用MVC开发的Kindeditor使用以及上传图片的个人经验
qq_32824141的博客
10-17 500
关于Kindeditor使用以及上传图片的个人经验小谈与最近的问题 Kindeditor是一个很不错的富文本框插件，引入的话会给网站开发大大减少很多工作，只是在使用的时候看官网的介绍总会有一些理解上的差别，在这里我希望通过我的经验来记录一下遇见的问题并帮助各位使用Kindeditor。我一直学习并使用的是ASP.NET，最近在做MVC的一个网站，也由于网上很多资料没有这方面的内容，所以希望可以帮助...
.NET MVC 中使用 kindeditor 中图片上传和查看功能
10-19
.NET MVC 中使用 kindeditor 中图片上传和查看功能 的正确使用方式
ASP.NET MVC中使用kindeditor富文本框、文件上传
qq_34550459的博客
05-25 1504
在网站后台,我们经常需要发布一些信息(包含文字、图片等等)供用户查阅,这时如果有一些编辑器的使用那么就得心应手了,其实有很多第三方插件实现了此功能, 我们只需要选择性的使用即可,那么今天要介绍一款富文本编辑器的第三方插件 kindeditor 1.首先下载该插件:官网已经挂了,不知怎么回事,去搜索找找 下载完,有如下目录结构: 因为我是在ASP.NET MVC项目中引用的,只需如下即可,把不需要的删掉: 然后添加到项目中: 首先在asp.net文件夹中找到Demo案例,看如何使用的: <%@ P
KindEditor - 支持word上传的富文本编辑器
最新发布
weixin_45525177的博客
05-13 1040
编辑器用的是KindEditor，需要为KindEditor增加复制粘贴图片的功能，复制word图片，复制本地图片，复制后粘贴到编辑器中，自动上传到服务器中。我们公司有一个新闻发布系统，每天都会安排同事在后台发布新闻，使用频率比较高，使用的是富文本编辑器，最近听同事抱怨发布新闻太繁琐了，word中的图片太多了，每次发新闻都要手动一张张上传图片，太累了。用户使用操作起来更方便一些，一般发新闻，或者发文章用的比较多，可以说是高频使用，3.如果接口返回的图片地址没有域名，请配置ImageUrl。
mvc4使用KindEditor文本编辑器
weixin_30719711的博客
03-25 87
　　最近做项目要用文本编辑器，编辑器好多种，这里介绍KindEditor在asp.net mvc4中的使用方法。 　　一、准备工作： 　　　　1.下载KindEditor.去官网：http://www.kindsoft.net/ 　　　　2.解压，拷贝到项目中（这里面有些例子，可以先删除掉在拷贝到项目中。） 　　二、使用步骤： 1.view页面 <scr...
KindEditor结合ssm框架使用
丁春秋的博客
11-12 2677
介绍最近项目中要用的文件上传的组件与富文本编辑器的使用。一直用的富文本编辑器是金山的KindEditor和百度的Ueditor。之前没有负责处理上传的业务逻辑，只是用的kindEditor的默认uploadjson.jsp.由于业务的变动。需要自己手动处理一下上传的服务端。废话不多说，今天先来介绍一下KindEditor的使用。之后会把Ueditor使用补上。使用kindEditor的好处srpin
springmvc+kindeditor文件上传实例详解
08-27
在本文中，我们将深入探讨如何使用Spring MVC框架与KindEditor集成实现文件上传功能。Spring MVC是Java企业级应用中广泛使用的MVC框架，它提供了一种结构化的方式来处理HTTP请求和响应，而KindEditor则是一个功能...
springMvc+easyui+ueditor例子
07-21
总的来说，"springMvc+easyui+ueditor例子"展示了如何整合这些技术来创建一个功能全面的Web应用，实现了对富文本内容的管理，对于学习和理解前后端交互、MVC架构以及富文本编辑器的使用具有很好的参考价值。...
ssm-demo：Spring + SpringMVC + Mybatis + easyUI实现简单的后台管理系统
02-02
ssm-demo：Spring + SpringMVC + Mybatis + easyUI整合 ：RESTful API + redis缓存 ：前扩展分离+部署部署（springboot + vue） ：dubbo服务化 ：springcloud技术栈实现微服务化 特别提示：数据库sql脚本文件在...
SpringMVC整合KindEditor上传文件的处理
04-17
在Spring MVC框架中整合KindEditor进行文件上传是一个常见的需求，特别是在构建富文本编辑器功能时。KindEditor是一款轻量级且功能丰富的JavaScript富文本编辑器，而Spring MVC是Java后端常用的MVC框架，用于处理...
SpringMVC+Hibernate+JqueryTimeLine整合
11-06
自己通过网上寻找的一些资料和文档进行总结和归纳的SpringMVC，自己也其中领悟到SpringMVC的优点和缺点。自己整理好想共享给大家。我在里面的注释也比较详细。其中有一个kindeditor整合这个一直存在问题。就放弃了。...
JAVA中使用kindeditor实现在线编辑文档
11-21
这是一个在线编辑文档的实例，用的kindeditor做插件，实现像iteye等网站一样的论文提交功能，资料源于网络。
springboot集成富文本编辑器
06-20
springboot集成富文本编辑器，maven项目，themyleaf模板
Spring MVC整合kindeditor富文本编辑器示例
09-12
Spring MVC整合kindeditor-4.1.11富文本编辑器示例, 原创已经测试成功.开发工具为eclipse,服务器是tomcat.其中具体的表述,也已经在博客中发表,可以关注一下.
java 富文本kindeditor4.0.3_jsp整合
11-20
java 富文本kindeditor4.0.3_jsp整合,里面说到kindeditor整合到jsp中去的要注意的几个问题
富文本编辑kindeditor使用 java 实现　spring mvc
06-22
富文本编辑kindeditor使用 java 实现　spring mvc也有可以参考
SSM框架+kindeditor实现文件上传和图片回显
软通大学企业博客
11-15 1726
富文本编辑器为客户资料编辑带来很大遍历，很多新同学却不能实现其内带的文件上传，不能发挥其最大功能。这里使用SSM框架结合kindeditor实现其文件上传和图片回显功能。 SSM框架（版本不重要） KindEditor 4.1.11 目前最新版本 目录结构如下 index.jsp就是测试页面，引入KindEditor要先引入jquery（主要引入2.x版本即可，太高不支持） &lt;scri...
KindEditor使用SpringMVC改造，实现绝对路径上传
热门推荐
whos2002110的专栏
06-23 2万+
这里的绝对路径是指项目以外的某个固定路径
SpringMVC整合KindEditor，实现图片上传、预览、删除
DataVault2.0大数据的未来
06-24 4832
之前我写过一篇关于《DWZ（JUI）整合Kindeditor应用于dialog弹出框》，只是讨论了前端的应用，并没有详细介绍后台代码实现。本文除了介绍后台的代码实现，还顺便介绍一些KindEditor的前端应用技巧。以前的是SSH框架实现KindEditor插件的上传、图片空间管理功能。现在的项目底层框架换成了springmvc，代码虽然变化不大，但是需要注意一些细节的实现。 具体后台实现：@Co
Spring+SpringMVC+JPA+Hibernate 搭建教程
在搭建SpringMVC+Hibernate平台时，首先要选择合适的开发工具和数据库。在这个例子中，选择了MyEclipse 8.6和MySQL 5.1。需要注意的是，不同版本的Spring和Hibernate可能会存在兼容性问题，因此推荐使用Spring 2.5和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值