UEditor 前后端分离【java版本】

UEditor 前后端分离【java版本】

Ueditor官网文档地址：http://fex.baidu.com/ueditor/#server-deploy

1. java后台配置：

下载源码包，解压后把\ueditor-1.4.3.3\ueditor-1.4.3.3\jsp\src\com\baidu\ueditor的文件拷贝到java项目src下。

Base64Uploader.java 因为jdk1.8不支持Base64.decodeBase64(content);

private static byte[] decode(String content) {
return Base64.getDecoder().decode(content);
//Base64.decodeBase64(content);
}

把config.json 放到src/main/resource
修改ConfigManager.java 文件，把originalPath 修改为：src/main/resources/config.json

/*
* 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在config.properties文件
*/
private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {

	rootPath = rootPath.replace( "\\", "/" );
	
	this.rootPath = rootPath;
	this.contextPath = contextPath;
	this.originalPath = "src/main/resources/config.json";
	
	//	if ( contextPath.length() > 0 ) {
	//	this.originalPath = this.rootPath + uri.substring( contextPath.length() );
	//	} else {
	//	this.originalPath = this.rootPath + uri;
	//	}
	
	this.initEnv();

}

新建一个controller

package com.ganjiangps.wangdaibus.controller;


import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import org.json.JSONException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;


import com.baidu.ueditor.ActionEnter;


@Controller
@CrossOrigin
public class UeditorController {


 	@RequestMapping("/config")
public void config(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException, JSONException{
  response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            //
            ActionEnter actionEnter = new ActionEnter(request, rootPath);
            String exec=actionEnter.exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        };
}
}

浏览器输入：http://localhost:8080/config?action=config

如果输入以下信息则后台配置成功：

{"videoMaxSize":102400000,"videoActionName":"uploadvideo","fileActionName":"uploadfile","fileManagerListPath":"/ueditor/jsp/upload/file/","imageCompressBorder":1600,"imageManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageManagerListPath":"/ueditor/jsp/upload/image/","fileMaxSize":51200000,"fileManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"fileManagerActionName":"listfile","snapscreenInsertAlign":"none","scrawlActionName":"uploadscrawl","videoFieldName":"upfile","imageCompressEnable":true,"videoUrlPrefix":"","fileManagerUrlPrefix":"","catcherAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"imageManagerActionName":"listimage","snapscreenPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlMaxSize":2048000,"imageInsertAlign":"none","catcherPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","catcherMaxSize":2048000,"snapscreenUrlPrefix":"","imagePathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","imageManagerUrlPrefix":"","scrawlUrlPrefix":"","scrawlFieldName":"upfile","imageMaxSize":2048000,"imageAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"snapscreenActionName":"uploadimage","catcherActionName":"catchimage","fileFieldName":"upfile","fileUrlPrefix":"","imageManagerInsertAlign":"none","catcherLocalDomain":["127.0.0.1","localhost","img.baidu.com"],"filePathFormat":"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}","videoPathFormat":"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}","fileManagerListSize":20,"imageActionName":"uploadimage","imageFieldName":"upfile","imageUrlPrefix":"","scrawlInsertAlign":"none","fileAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"catcherUrlPrefix":"","imageManagerListSize":20,"catcherFieldName":"source","videoAllowFiles":[".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"]}

2. 前端配置：

下载[1.4.3.3 Jsp 版本] 解压，修改ueditor.config.js 的serverUrl为：“http://localhost:8080/config”。

浏览器打开index.html，显示如下，配置成功：

以下是把图片上传到图片服务器：

这是ueditor二次开发返回示例链接：

http://fex.baidu.com/ueditor/#dev-request_specification

这里是自定义请求地址示例链接：

http://fex.baidu.com/ueditor/#qa-customurl

ueditor 编辑页面自定义anction请求地址【记得自定义action请求地址】：

文件上传Controller ：

这里的uploadimage anction地址就是编辑页面自定义的action请求地址。

@ResponseBody
@RequestMapping("/uploadimage")
public Map<String,Object> uploadImageTest(@RequestParam("upfile") MultipartFile multipartFile){
	System.out.println("===uploadimage=======");
	Map<String,Object> res = new HashMap<>();
	try{
		//封装的图片上传方法
		AjaxResult ajax = preForumAttachmentService.uploadImageApi(multipartFile, (long)999999);
		 	res.put("url", "url");//上传的图片路径
		res.put("state", "SUCCESS");
		res.put("title", multipartFile.getOriginalFilename());
		res.put("original", multipartFile.getOriginalFilename());
	 	return res ;
	}catch(Exception e){
		e.printStackTrace();
		return res;
	}
}

这里特别说明下，多图上传和单图上传是一样的，多图上传则是循环调用了单图上传。

单图上传例子，返回格式：

{
    "state": "SUCCESS",
    "url": "upload/demo.jpg",
    "title": "demo.jpg",
    "original": "demo.jpg"
}

以下为部署linux服务器时修改的配置：

com.baidu.ueditor.ConfigManager.java

private static final String configFileName = "WEB-INF/classes/config.json";//部署linux 配置项 
	
	//部署linux 配置项
	if ( contextPath.length() > 0 ) {
	this.originalPath = this.rootPath + uri.substring( contextPath.length() );
	} else {
	this.originalPath = this.rootPath + uri;
	
	}