springmvc整合ueditor,ueditor修改上传路径及页面回显问题

1、        在官网(http://ueditor.baidu.com/website/download.html)下载ueditor完整源码

2、查看官网文档(http://fex.baidu.com/ueditor/)

3、 (https://nodejs.org/en/)下载nodejs进行安装，安装后在命令行执行node –v，出现nodejs的版本号说明安装成功

4、 进入ueditor源码根目录，执行npm install，命令执行结束后，会在ueditor目录下出现一个node_modules文件夹

5、 仍然在该目录下，执行
grunt --encode=utf8 --server= jsp
命令进行打包(电脑上需要有Java环境),

打包成功后会在ueditor源码根目录下出现dist文件夹，里面就是打好包的ueditor了

6、 创建一个web工程，导入刚才打包后的jar包

7、 复制jsp源码到工程中

8、 项目结构

下面要开始修改源码了，注意：

//======================================

这里是修改的代码

//======================================

其他的均是源码部分

9、 修改ConfigManager.java文件

找到private ConfigManager ( String rootPath, String contextPath, String uri )方法

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;
}
*/
//=================================================
//让originalPath指向WebRoot/ueditor/ueditor.config.js文件路径
this.originalPath = this.rootPath +"ueditor"+File.separator+"ueditor.config.js";
//=================================================
this.initEnv();

}

找到public Map<String, Object> getConfig (
int type )方法

conf.put( "savePath", savePath );
conf.put( "rootPath", this.rootPath );
//=======================================================
//获取在config.json文件中自定义的路径
conf.put("diskPath", this.jsonConfig.getString( "diskPath" ));
//=======================================================

10、10、 修改FileManager.java文件

private String dir = null;
private String rootPath = null;
//=======================================
private String diskPath = null;
//=======================================
private String[] allowFiles = null;
private int count = 0;

public FileManager ( Map<String, Object> conf ) {

this.rootPath = (String)conf.get( "rootPath" );
//==========================================================
this.diskPath = (String)conf.get( "diskPath" );
if(this.diskPath != null && !"".equals(this.diskPath)){
this.dir = this.diskPath + (String)conf.get( "dir" );
}else{
this.dir = this.rootPath + (String)conf.get( "dir" );
}
//==========================================================
//this.dir = this.rootPath + (String)conf.get( "dir" );
this.allowFiles = this.getAllowFiles( conf.get("allowFiles") );
this.count = (Integer)conf.get( "count" );

}

找到private String getPath ( File file )方法

private String getPath ( File file ) {

String path = file.getAbsolutePath();
//============================================================
if(this.diskPath != null && !"".equals(this.diskPath)){
return path.replace( this.diskPath, "/" );
}
//============================================================
return path.replace( this.rootPath, "/" );

}

11、修改ImageHunter.java文件

private String filename = null;
private String savePath = null;
private String rootPath = null;
//=======================================
private String diskPath = null;
//=======================================
private List<String> allowTypes = null;
private long maxSize = -1;

private List<String> filters = null;

public ImageHunter ( Map<String, Object> conf ) {

this.filename = (String)conf.get( "filename" );
this.savePath = (String)conf.get( "savePath" );
this.rootPath = (String)conf.get( "rootPath" );
//=======================================================
this.diskPath = (String)conf.get( "diskPath" );
//=======================================================
this.maxSize = (Long)conf.get( "maxSize" );
this.allowTypes = Arrays.asList( (String[])conf.get( "allowFiles" ) );
this.filters = Arrays.asList( (String[])conf.get( "filter" ) );

}

找到public State captureRemoteData ( String urlStr )方法

if ( !validFileSize( connection.getContentLength() ) ) {
return new BaseState( false, AppInfo.MAX_SIZE );
}

String savePath = this.getPath( this.savePath, this.filename, suffix );
//===============================================================
//此修改是为了在网页上复制图片文字时，图片保存到本地的位置
String physicalPath = null;
if(this.diskPath != null && !"".equals(this.diskPath)){
physicalPath = this.diskPath + savePath;
}else{
physicalPath = this.rootPath + savePath;
}
//===============================================================
//String physicalPath = this.rootPath + savePath;

State state = StorageManager.saveFileByInputStream( connection.getInputStream(), physicalPath );

12、修改Base64Uploader.java文件
找到public static final State save(HttpServletRequest request, Map<String, Object> conf)方法

if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
}

savePath = PathFormat.parse(savePath, originFileName);
//===============================================================
String physicalPath = null;
String diskPath = (String) conf.get("diskPath");
if(diskPath != null && !"".equals(diskPath)){
physicalPath = diskPath + savePath;
}else{
physicalPath = (String) conf.get("rootPath") + savePath;
}
//==============================================================
//String physicalPath = (String) conf.get("rootPath") + savePath;

InputStream is = fileStream.openStream();
State storageState = StorageManager.saveFileByInputStream(is,
physicalPath, maxSize);
is.close();

修改完毕导出为jar包

新建一个web工程，搭建好SpringMVC环境

ueditor所需jar以及刚才导出的jar包

在WebRoot下新建一个ueditor文件夹

将相关文件复制到ueditor文件夹中

项目结构

编写一个Controller类，用于替代原来的controller.jsp.jsp文件

package 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 ToUeditor {
@RequestMapping("/toValidate")
public void writeMassage(HttpServletRequest request,HttpServletResponse response){

bbcc
response.setContentType("application/json");
String rootPath = request.getSession().getServletContext().getRealPath("/");
try {
PrintWriter writer = response.getWriter();
writer.write(new ActionEnter(request, rootPath).exec());
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}

修改config.json文件，注意：配置前缀时，一定要加上http://否则会发生图片不能正常回显的情况

我的虚拟映射路径配置

uploadFile.xml文件内容

<Context docBase="C:/uploadFile" debug="0" reloadable="true"/>





修改ueditor.config.js文件

(function () {

/**
* 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
* 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
* "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
* 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
* 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
*/
//=======================================================================================
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();

/**
* 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {

//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL

// 服务器统一请求接口路径
//        , serverUrl: URL + "jsp/controller.jsp"
//===================================================================================
, serverUrl:applicationPath+"/ueditor/toValidate"
//===================================================================================

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',

由于SpringMVC的拦截规则为   /    所以需要修改springmvc.xml文件使得静态资源能够被放行

编写页面进行上传测试：index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 配置文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>
</head>

<body>
<script id="imageEditor" name="content" type="text/plain">
</script>
</body>
<script type="text/javascript">
var ue = UE.getEditor('imageEditor');
</script>
</html>

在浏览器输入http://localhost:8080/ueditortest/

进行多图上传测试

页面正常显示

进行单图上传测试

查看本地对应的文件夹是否有图片

从网页上复制过来的图片，截图的图片，视频等均可上传，在此就不一一进行测试了