springmvc与百度Ueditor整合

最新推荐文章于 2021-08-31 09:58:08 发布

jinzhoujiannan

最新推荐文章于 2021-08-31 09:58:08 发布

阅读量2.7k

点赞数 3

分类专栏：整合框架

整合框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网上查了不少文章，动手试验了几个，效果都不太理想，后来找到两篇相似的文章，综合了一下，成功了，下面总结给大家，也备着自己以后使用方面。

引用文章如下：

http://www.cnblogs.com/mumuxinfei/p/5363909.html

http://blog.csdn.net/draven1122/article/details/53301504

感谢上述文章作者！

一、首先去官网http://ueditor.baidu.com/website/download.html

下载必要的jsp包和完整源码包，解压后如下图

二、将jsp包解压后的目录改名为ueditor放到webapp下

三、解压后的源码包目录结构如下

进入jsp文件夹下的src目录将com包下的源码加入到自己的工程里，如下图

注意：1、我的工程使用的idea开发工具，目录结构跟eclipse等有所差别，但是万变不离其宗，放到源码应该放的位置就行。

2、CommonsMultiparResolver.java文件不是源码包里的，是我后加的，这个很重要。之后会把相关代码贴出来。

引入依赖包

<!-- 上传文件的支持 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.10</version>
</dependency>

<!-- org.json -->
<!--JSON is a light-weight, language independent, data interchange format. See http://www.JSON.org/-->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20160212</version>
</dependency>

四、修改ConfigManager.java的getConfigPath()方法，用来获取正确的配置文件config.json的位置

修改后：

    private String getConfigPath () {
//    return this.parentPath + File.separator + ConfigManager.configFileName;
//    return this.rootPath+File.separator+"ueditor"+File.separator+"jsp"+File.separator+ConfigManager.configFileName;
      String configPath = this.rootPath
            + File.separator + "conf"
            + File.separator + ConfigManager.configFileName;
      return configPath;
   }

在webapp下建立conf目录，并将config.json复制到其下，上面修改的路径就能正确读取到这个文件了。

五、建立controller接收上传文件的请求，初始化编辑器等，将官方jsp的写法翻译过来如下：

@Controller
@RequestMapping("/ued")
public class UedController {
    @RequestMapping(value="/config")
    public void config(HttpServletRequest request, HttpServletResponse response){
        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

然后修改ueditor.config.js文件，将服务器统一请求接口修改为我们新写的 controller的地址

// 服务器统一请求接口路径
// , serverUrl: URL + "jsp/controller.jsp"
, serverUrl: "/ued/config"
//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义

六、在springmvc的配置文件中设置不过滤内容，以免页面加载不到js文件等

<mvc:resources location="/ueditor/" mapping="/ueditor/**"/>

七、复写 CommonsMultipartResolver.java

并在配置文件中注册

package com.baidu.ueditor;

import org.springframework.web.multipart.commons.CommonsMultipartResolver;

public class CommonsMultiparResolver extends CommonsMultipartResolver {
  
    @Override    
      public boolean isMultipart(javax.servlet.http.HttpServletRequest request) {    
       String uri = request.getRequestURI();    
       System.out.println(uri);  
       //过滤使用百度UEditor的URI    
       if (uri.indexOf("ued/config") > 0) {     //此处拦截路径即为上面编写的controller路径
        System.out.println("commonsMultipartResolver 放行");  
        return false;    
       }    
       System.out.println("commonsMultipartResolver 拦截");  
       return super.isMultipart(request);    
      }    
}

<!--文件上传-->
<!--<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>-->
<bean id="multipartResolver" class="com.baidu.ueditor.CommonsMultiparResolver"/>

八、jsp页面，测试下

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    
</head>
<body>

</body>

<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.min.js"></script>
<script src="/ueditor/lang/zh-cn/zh-cn.js"></script>


<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<script type="text/javascript">
    var editor = UE.getEditor('container');
</script>
</html>

ok，图片是可以上传的