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}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

原文地址:https://www.cnblogs.com/jc1997/p/11037573.html

时间: 2024-11-07 20:08:18

springMVC -- 对接UEditor(富文本编辑器)的相关文章

springMVC -- 整合UEditor(富文本编辑器)

工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 1.编写controller 如下(该接口是ueditor前后台交互的统一路径) : package com.test.dcdp.controller; import java.io.IOException; import java.io.PrintWriter; import javax.servlet

ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor. 一.我们先讲完全版的ueditor. 1.建立数据模型. 2.建立对应的控制器和视图. 3.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新

WEB项目中使用UEditor(富文本编辑器)

Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文本编辑器的使用哈!觉得写得不错的请点赞哈,有建议欢迎提哈!^V^ 下载链接:http://ueditor.baidu.com/website/download.html 具体的使用请看官网:http://ueditor.baidu.com/website/index.html 下载富文本编辑器后,我

django之百度Ueditor富文本编辑器后台集成

Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1: 在官网下载Ueditor的任意版本代码:http://ueditor.baidu.com/website/download.html#ueditor 步骤2: 将下载的代码放入到 django 项目中 步骤3:前端引用 在前端HTM

PHP如何搭建百度Ueditor富文本编辑器

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 ? 1 2 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ued

PHP Ueditor 富文本编辑器

2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主要说明图片上传怎么使用 HTML: 1 //承载编辑器 2 <script id="container" name="content" type="text/plain"></script> 3 4 5 //加载js 6 &l

ASP.NET MVC 中使用 UEditor 富文本编辑器

在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是-- 好吧,咱得搞专业点.来个传说中的富文本编辑器,度娘了一下,发现 KISSY Editor 和 UEditor 貌似比较简单的样子,既然这样就用百度的 UEditor 吧,到这里下载最新的.NET版. 解压后,将默认目录名称改为 ueditor 然后复制到项目的 Content 目录中,大概就像下图中的样子 打开~/Views/P

vue集成百度UEditor富文本编辑器

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码.地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEd

在网站中使用UEditor富文本编辑器

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点. 官网链接 进入到下载页面,选择相应的版本下载 这里我们使用ASP.NET开发,所以选择.NET版本. 将文件解压后,目录结构如下: 将外部js引入到页面中 <script src="Assets/js/ueditor/ueditor.config.js" type="text/javascript"></script> <s