UEditor编辑器小扩展

项目中使用UEditor编辑器作为富文本编辑器,用起来挺好。但随着文件服务器的搭建,项目中图片文件以及其它一下小文件被独立存储之后,UEditor用起来就不那么爽了。

如果不做点改动的话,所有通过UEditor上传的文件,还是存储在项目中的/ueditor/jsp/upload/目录下(默认配置),无法和文件服务器配合使用。

所以改动是必然的,具体操作步骤如下:

1、找切入点。

      ueditor.config.js中配置了服务器统一请求接口路径。这个就是突破口。

    这个controller.jsp究竟是个啥东东,打开一看便知:

UEditor编辑器小扩展_第1张图片

由上面划红线的代码可以看出,其实真正的“幕后黑手”是 com.baidu.ueditor.ActionEnter (ueditor-1.1.1.jar中,源码官网下载的源码包中也有)。

2、打开com.baidu.ueditor.ActionEnter,你就发现invoke方法中统一了文件上传和列表显示文件的类和方法。

UEditor编辑器小扩展_第2张图片

3、由以上两点可以看出,只需要从ActionEnter,Uploader,FileManager这三个类入手即可。

     接着追踪代码,结合搞这个扩展的出发点(从UEditor中分离文件存储和文件访问),发现只需要把怎样获取表单中提交的文件流,如何存储文件,如何访问文件,这三个问题搞定即可。

结合ueditor的源码,定义了如下接口:

package net.viservice.editor.ueditor;

import javax.servlet.http.HttpServletRequest;

import net.viservice.editor.MultipartFile;

import com.baidu.ueditor.define.State;

public interface UeditorService {

	/**
	 * 获取上传的文件
	 * 
	 * @param filedName
	 *            参数名
	 * @param request
	 * @return
	 */
	public MultipartFile getMultipartFile(String filedName, HttpServletRequest request);

	/**
	 * 存储文件
	 * 
	 * @param multipartFile
	 * @param maxSize
	 * @return
	 */
	public State saveFileByInputStream(MultipartFile multipartFile, long maxSize);

	/**
	 * 存储文件
	 * 
	 * @param data
	 * @param fileName
	 * @return
	 */
	public State saveBinaryFile(byte[] data, String fileName);

	/**
	 * 获取文件列表
	 * 
	 * @param allowFiles
	 *            允许显示的文件
	 * @param start
	 *            起始位置
	 * @param pageSize
	 *            每页显示条数
	 * @return
	 */
	public State listFile(String[] allowFiles, int start, int pageSize);
	
}

这样就分离了文件的存储和访问。可以自由实现UeditorService接口,完成自己的应用与文件服务器或者云存储服务的结合了。

详细的代码放在:http://git.oschina.net/xiangzi/ueditor-extend 

你可能感兴趣的:(UEditor编辑器小扩展)