百度编辑器UEditor前后端分离，后端Java代码改善

最近项目需要用到百度编辑器UEditor,之前使用Ueditor的时候还是刚工作的时候，那个时候jsp页面不懂里面过程，最近项目使用前后端分离使用UEditor记录下学习的过程，这里只是后端的代码

先自行下载官网的源码，找到里面jsp文件,里面的 < config.json > 这个保存好这个是需要给前端初始化用，前端调用接口读取这个文件里面的配置来初始化编辑器

 

 我们首先需要创建一个统一接口 来执行初始化编辑器和上传图片的功能

/**
 * @author HeWei
 * 百度编辑器
 */
@RestController
@RequestMapping("/ueditor")
public class UeditorController {

    Logger logger = Logger.getLogger("ueditorController");

    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        // 设置返回类型
        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            logger.info("百度编辑config异常");
        }
    }
}

在调用步骤是 在执行到

new ActionEnter(request, rootPath).exec(); 的时候进入 ActionEnter类的构造方法中

	public ActionEnter ( HttpServletRequest request, String rootPath) {
		
		this.request = request;
		this.rootPath = rootPath;
		this.actionType = request.getParameter( "action" );
		this.contextPath = request.getContextPath();
		this.configManager = ConfigManager.getInstance( this.rootPath, this.contextPath, request.getRequestURI() );

		
	}

运行getInstance 进入 ConfigManager类的工厂构造器方法

    /**
     * 配置管理器构造工厂
     *
     * @param rootPath    服务器根路径
     * @param contextPath 服务器所在项目路径
     * @param uri         当前访问的uri
     * @return 配置管理器实例或者null
     */
    public static ConfigManager getInstance(String rootPath, String contextPath, String uri) {

        try {
            ConfigManager configManager = new ConfigManager(rootPath, contextPath, uri);
            return configManager;
        } catch (Exception e) {
            return null;
        }

    }

    /*
     * 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在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();

    }

这个对象我们只要看 initEnv()方法 这个方法主要是获得config.json的配置信息转换的json对象数据

    private void initEnv() throws FileNotFoundException, IOException {

        File file = new File(this.originalPath);

        if (!file.isAbsolute()) {
            file = new File(file.getAbsolutePath());
        }

        this.parentPath = file.getParent();

        // 获取读取到的属性 在转换成json发给前端完成初始化
        String configContent = this.readFile(CONFIG_PATH);

        try {
            JSONObject jsonConfig = JSON.parseObject(configContent);
            this.jsonConfig = jsonConfig;
        } catch (Exception e) {
            this.jsonConfig = null;
        }

    }


     // 这里主要就是读取config.json文件里面的属性 转换成字符串
    private String readFile(String path) throws IOException {

        StringBuilder builder = new StringBuilder();
        try {
            BufferedReader bfReader;
            // 判断 读取 springboot中resource文件  add by huwei@20190203
            if (StringUtils.isEmpty(path)) {
                InputStream inputStream = this.getClass().getResourceAsStream("/config.json");
                InputStreamReader reader = new InputStreamReader(inputStream);
                bfReader = new BufferedReader(reader);
            } else {
                // 读取配置的文件
                InputStreamReader reader = new InputStreamReader(new FileInputStream(path), "UTF-8");
                bfReader = new BufferedReader(reader);
            }
            String tmpContent = null;

            while ((tmpContent = bfReader.readLine()) != null) {
                builder.append(tmpContent);
            }

            bfReader.close();

        } catch (UnsupportedEncodingException e) {
            // 忽略
        }

        return this.filter(builder.toString());

    }

执行完以上步骤就完成编辑器的初始化了

编辑器图片上传：

    百度编辑器的默认的图片是存储的本地。所有我们需要修改源码里面的图片上传代码

 在ActionEnter类中的 invoke()方法是根据类型执行响应操作   图片上传,视频上传,上传文件 都是一个方法

	case ActionMap.UPLOAD_IMAGE:
			case ActionMap.UPLOAD_SCRAWL:
			case ActionMap.UPLOAD_VIDEO:
			case ActionMap.UPLOAD_FILE:
				conf = this.configManager.getConfig( actionCode );
				state = new Uploader( request, conf ).doExec();
				break;

最终上传的对象是BinaryUploader类中的save方法

// 将这段自定的上传图片代码  改成 自己项目实现的图片上传
			savePath = PathFormat.parse(savePath, originFileName);

			String physicalPath = (String) conf.get("rootPath") + savePath;

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

    if (storageState.isSuccess()) {
                storageState.putInfo("url",uploadFile.getUrl() );  //返回给前端的图片路径
                storageState.putInfo("type", suffix);
                storageState.putInfo("original", originFileName + suffix);
            }

使用自己的图片上传将返回的图片保存信息  在返回给前端就可以了 。

这样就完成前后端分离Ueditor了。