springmvc与百度Ueditor整合

来源：互联网发布：linux查看硬盘分区编辑：程序博客网时间：2024/05/16 06:19

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

引用文章如下：

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，图片是可以上传的

阅读全文

1 0