jsp版ueditor(1.4.3.2)修改在线附件带文件夹展示功能

原版的ueditor在线附件是遍历整个附件文件夹将内部所有文件遍历出来。主要修改实现层级遍历，当点击附件文件夹下的子文件夹时，进入子文件夹展示其中文件，并拥有返回功能。

修改结果截图如下：

一、修改ActionEnter.java文件（90行左右）；

case ActionMap.LIST_FILE:
	conf = configManager.getConfig( actionCode );
	int start = this.getStartIndex();
	//获取前台页面传递的文件路径
	String filePath = this.request.getParameter("filePath");
	state = new FileManager( conf ).listFile( start , filePath );
	break;

二、修改FileManager.java文件；

1.修改getPath方法

private String getPath ( File file ) {
  //String path = file.getAbsolutePath();     //BUG
  String path = PathFormat.format(file.getAbsolutePath());
  return path.replace( this.rootPath, "" );
}

2.修改listFile方法

public State listFile(int index, String filePath) {
/**修改位置start*/
  if (!filePath.equals("")) {
	this.dir = this.rootPath + filePath;
  }
/**修改位置end*/
  File dir = new File(this.dir);
  State state = null;
  if (!dir.exists()) {
	return new BaseState(false, AppInfo.NOT_EXIST);
  }
  if (!dir.isDirectory()) {
	return new BaseState(false, AppInfo.NOT_DIRECTORY);
  }
/**修改位置start*/
  File[] files = dir.listFiles();
  if (files == null || files.length == 0) {
	System.out.println("文件夹是空的!");
	return null;
  }
  /*
  else {
	for (File file2 : files) {
		if (file2.isDirectory()) {
			System.out.println("文件夹:" + file2.getAbsolutePath());
		} else {
			System.out.println("文件:" + file2.getAbsolutePath());
		}
	}
  }*/
  //Collection<File> list = FileUtils.listFiles( dir, this.allowFiles, true );
/**修改位置end*/
  if (index < 0 || index > files.length) {
	state = new MultiState(true);
  } else {
	Object[] fileList = Arrays.copyOfRange(files, index, index + this.count);
	state = this.getState(fileList);
  }
  state.putInfo("start", index);
  state.putInfo("total", files.length);
  return state;
}

三、修改前台js事件，我将在线附件功能单独提取出来命名为attachonline.js，主要使用回调方法，每次点击文件夹都向后台发送请求。

1.添加附件文件夹根目录路径

var rootFilePath = "download/";

2.修改初始化tabbody

function setTabFocus(id) {
   if (!id) return;
   switch (id) {
       case 'online':
           onlineFile = onlineFile || new OnlineFile('fileList', '');
           break;
       default ://传递filePath路径
           onlineFile = new OnlineFile('fileList', id);
   }
}

3.修改初始化容器，添加返回上级图标

this.container.innerHTML = '<ul id="goBack" ' + ((filePath != "" && filePath != rootFilePath) ? '' : ' style="display: none;"') + '>' +
            '<li data-url="' + (filePath2) + '">' +
            '<div class="file-wrapper"><i class="go_back"></i><span class="file-title">返回上级</span></div>' +
            '<span class="icon"></span>' +
            '</li>' +
            '</ul>';
            this.list = document.createElement('ul');
            this.clearFloat = document.createElement('li');

4.修改选中图片事件（当图片为文件夹时，点击后展示该文件夹），增加返回上级点击事件

/* 选中图片 */
domUtils.on(this.list, 'click', function (e) {
      var target = e.target || e.srcElement,
          li = target.parentNode;

      if (li.tagName.toLowerCase() == 'li') {
         if (li.firstChild.firstChild.classList[0] == "file-type-dir") {
            //文件夹点击事件
              var filePath = $(li).attr("data-url");
            setTabFocus(filePath);
         } else if (domUtils.hasClass(li, 'selected')) {
            domUtils.removeClasses(li, 'selected');
         } else {
            domUtils.addClass(li, 'selected');
         }
     }
});
//返回点击事件
domUtils.on(document.getElementById("goBack"), 'click', function (e) {
    var target = e.target || e.srcElement,
        li = target.parentNode;
    if (li.tagName.toLowerCase() == 'li') {
       var filePath = $(li).attr("data-url");
       setTabFocus(filePath);
    }
});

5.修改向后台拉取图片列表数据传递的参数(getFileData方法)

editor.getActionUrl(editor.getOpt('fileManagerActionName') + "&filePath=" + filePath)

6.修改添加图片到列表界面上，增加对文件夹的判断

filetype = list[i].url.substr(list[i].url.lastIndexOf('.') + 1);
//如果filetype包含download字符则当前文件是文件夹
if (filetype.indexOf("download") != -1) {
   filetype = "dir";
}