zoukankan      html  css  js  c++  java
  • springMVC -- 整合UEditor(富文本编辑器)

    工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示:

    上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题。

     一种方式是直接修改源码,步骤如下:

    1、编写controller 如下(该接口是ueditor前后台交互的统一路径) :

    package com.test.dcdp.controller;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.baidu.ueditor.ActionEnter;
    
    @Controller
    @RequestMapping("/ueditor")
    public class UeditorController {
    
        @RequestMapping("/dispatch")
        public void config(HttpServletRequest request,  HttpServletResponse response) {
               // response.setContentType("application/json");              
                String rootPath = request.getSession().getServletContext().getRealPath("/");
                response.setHeader("Content-Type" , "text/html");
                try {
                    String a = request.getRequestURI();
                        String exec = new ActionEnter(request, rootPath).exec();
                        PrintWriter writer = response.getWriter();
                        writer.write(exec);
                        writer.flush();
                        writer.close();
                } catch (IOException e) {
                        e.printStackTrace();
                }
                
        }
    }

    2、修改ueditor的配置文件 ueditor.config.js(指定后台服务器地址),如下所示

    修改前:

        var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    
        /**
         * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
         */
        window.UEDITOR_CONFIG = {
    
            //为编辑器实例添加一个路径,这个不能被注释
            UEDITOR_HOME_URL: URL
    
            // 服务器统一请求接口路径
            , serverUrl: URL + "php/controller.php"

    修改后 :

       var getRootPath = function (){
            //获取当前网址
            var curWwwPath=window.document.location.href;
            //获取主机地址之后的目录
            var pathName=window.document.location.pathname;
            
            var pos=curWwwPath.indexOf(pathName);
            //获取主机地址
            var localhostPaht=curWwwPath.substring(0,pos);
            //获取带"/"的项目名,如:/uimcardprj
            var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
            
            return(localhostPaht+projectName);
        }
        //获取路径     
        var applicationPath = getRootPath();
        var URL = window.UEDITOR_HOME_URL || getUEBasePath();
        var serverURL = applicationPath;
    /** * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。 */ window.UEDITOR_CONFIG = { //为编辑器实例添加一个路径,这个不能被注释 UEDITOR_HOME_URL: URL // 服务器统一请求接口路径 , serverUrl: serverURL + "ueditor/dispatch"

    3、修改ueditor源码 ConfigManager.java(指定配置文件路径).

    修改前 :

        /*
         * 通过一个给定的路径构建一个配置管理器, 该管理器要求地址路径所在目录下必须存在config.properties文件
         */
        private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {
            
            rootPath = rootPath.replace( "\", "/" );
            
            this.rootPath = rootPath;
            this.contextPath = contextPath;
            
            if ( contextPath.length() > 0 ) {
                this.originalPath = this.rootPath + uri.substring( contextPath.length() );
            } else {
                this.originalPath = this.rootPath + uri;
            }
            
            this.initEnv();
            
        }

    修改后 :

        /*
         * 通过一个给定的路径构建一个配置管理器, 该管理器要求地址路径所在目录下必须存在config.properties文件
         */
        private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {
            
            rootPath = rootPath.replace( "\", "/" );
            
            this.rootPath = rootPath;
            this.contextPath = contextPath;
            
            /*if ( contextPath.length() > 0 ) {
                this.originalPath = this.rootPath + uri.substring( contextPath.length() );
            } else {
                this.originalPath = this.rootPath + uri;
            }*/
            
            this.originalPath = rootPath + "static" + File.separator + "lib" + File.separator +
                    "ueditor" + File.separator + "1.4.3" + File.separator + "jsp" + File.separator + "controller.jsp";
            ///EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jsp
            
            this.initEnv();
            
        }

    如上所述,主要修改 originalPath 的路径,否则ueditor的配置文件(ueditor_config.json)路径是错误的(与springMVC整合的情况),之所以向上面那样拼接路径,是因为我的ueditor相关文件拷贝在了(EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jsp)路径里。

    4、(若未执行该步操作,在选择好图片后,点击上传,将提示 : “未找到上传文件”)由于上传的文件都会被springmvc的文件上传拦截器拦截,包装,这样百度编辑器接收到文件后不能识别文件格式,因此把spring默认的commonsMultiparResolver,替换成我们自己写的commonsMultiparResolver ,并修改配置文件。

    重写CommonsMultipartResolver :

    package com.tianwen.dcdp.common;
    
    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("ueditor/dispatch") > 0) {     //此处拦截路径即为上面编写的controller路径
            System.out.println("commonsMultipartResolver 放行");
            return false;  
           }  
           System.out.println("commonsMultipartResolver 拦截");
           return super.isMultipart(request);  
          }  
    }

    修改springMVC配置文件spring-mvc.xml :

        <!-- 修改为我们重写的CommonsMultiparResolver而不是spring提供的 -->
        <bean id="multipartResolver"  
            class="com.tianwen.dcdp.common.CommonsMultiparResolver">  
            <!-- 默认编码 -->
            <property name="defaultEncoding" value="utf-8" />  
            <!-- 文件大小最大值 -->
            <property name="maxUploadSize" value="10485760000" />  
            <!-- 内存中的最大值 -->
            <property name="maxInMemorySize" value="40960" />  
        </bean> 

    5、最后配置上传文件保存目录,修改ueditor配置文件(ueditor_config.json):

    修改如下参数(即配置上传文件的URL路径,若配置不正确,富文本编辑器中将不能正确显示上传的图片):

        "imageUrlPrefix": "http://localhost:80/EdwManage", /* 图片访问路径前缀 */
        "imagePathFormat": "/static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

    此处 imagePathFormat 之所以配置为如上格式,是因为springMVC中,指定了static目录下的资源为静态资源(其他路径都会被springMVC拦截)。

    文件默认保存的物理路径为: web应用根路径 + imagePathFormat 。

    {yyyy}{mm}{dd} : 按天分类保存

    {time}{rand:6} : 随机生成文件名

    另外还有一种简单的解决办法:

    1、新建一web工程(ueditor)。

    2、将下载下来的ueditor文件拷贝到新建工程 的webapps目录下,可参考官网介绍

    3、在使用ueditor的工程中,修改ueditor配置文件(ueditor.config.js)如下 :

        window.UEDITOR_HOME_URL = "http://localhost/ueditor/";
        var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    
        /**
         * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
         */
        window.UEDITOR_CONFIG = {
    
            //为编辑器实例添加一个路径,这个不能被注释
            UEDITOR_HOME_URL: URL
    
            // 服务器统一请求接口路径
            , serverUrl: URL+ "jsp/controller.jsp"


    3、配置上传文件保存路径,修改(ueditor_config.json) :

      "imageUrlPrefix": "http://localhost:80/ueditor", /* 图片访问路径前缀 */
      "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  • 相关阅读:
    [LC] 252. Meeting Rooms
    [LC] 243. Shortest Word Distance
    [LC] 215. Kth Largest Element in an Array
    [LC] 8. String to Integer (atoi)
    [LC] 367. Valid Perfect Square
    [LC] 66. Plus One
    [LC] 7. Reverse Integer
    [GeeksForGeeks] Print all nodes that don't have sibling in a binary tree.
    [Coding Made Simple] Maximum Sum Subsequence Non-adjacent
    [Coding Made Simple] Longest Bitonic Subsequence
  • 原文地址:https://www.cnblogs.com/yinz/p/5502405.html
Copyright © 2011-2022 走看看