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"]}

java 后台配置结束。

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;

}