關於百度Editor富文本編輯器 自定義上傳位置
由於要在網站上編輯富文本數據，因此直接採用百度的富文本編輯器，可是這個編輯器有個缺點，默認狀況下，文件只能上傳到網站的根目錄,不能自定義路徑。html
並且json配置文件只能和controller.jsp在同一個目錄下,很差管理。因此小淘氣兒修改了部分源碼以及配置了一個攔截器，實現了以上功能。java
首先，將下載，並解壓的文件夾複製到webapp目錄下，如圖：git
並將ueditor/jsp/下的config.json移動到resources目錄下，github
config.json是配置圖片,文件，視頻信息的json格式的文件。如下我就用圖片講解：web
/* 先後端通訊相關的配置,註釋只容許使用多行方式 */ { "uploadRoot": "F://javaWeb//UEditor/target/ueditor-1.0-SNAPSHOT/", /*文件上傳根目錄 */ /* 上傳圖片配置項 */ "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */ "imageFieldName": "upfile", /* 提交的圖片表單名稱 */ "imageMaxSize": 2048000, /* 上傳大小限制，單位B */ "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */ "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */ "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */ "imageInsertAlign": "none", /* 插入的圖片浮動方式 */ "imageUrlPrefix": "http://localhost:8088/ueditor", /* 圖片訪問路徑前綴 */ "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */ /* {filename} 會替換成原文件名,配置這項須要注意中文亂碼問題 */ /* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */ /* {time} 會替換成時間戳 */ /* {yyyy} 會替換成四位年份 */ /* {yy} 會替換成兩位年份 */ /* {mm} 會替換成兩位月份 */ /* {dd} 會替換成兩位日期 */ /* {hh} 會替換成兩位小時 */ /* {ii} 會替換成兩位分鐘 */ /* {ss} 會替換成兩位秒 */ /* 非法字符 \ : * ? " < > | */ /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */ /* 塗鴉圖片上傳配置項 */ "scrawlActionName": "uploadscrawl", /* 執行上傳塗鴉的action名稱 */ "scrawlFieldName": "upfile", /* 提交的圖片表單名稱 */ "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */ "scrawlMaxSize": 2048000, /* 上傳大小限制，單位B */ "scrawlUrlPrefix": "", /* 圖片訪問路徑前綴 */ "scrawlInsertAlign": "none", /* 截圖工具上傳 */ "snapscreenActionName": "uploadimage", /* 執行上傳截圖的action名稱 */ "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */ "snapscreenUrlPrefix": "", /* 圖片訪問路徑前綴 */ "snapscreenInsertAlign": "none", /* 插入的圖片浮動方式 */ /* 抓取遠程圖片配置 */ "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", /* 執行抓取遠程圖片的action名稱 */ "catcherFieldName": "source", /* 提交的圖片列表表單名稱 */ "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */ "catcherUrlPrefix": "", /* 圖片訪問路徑前綴 */ "catcherMaxSize": 2048000, /* 上傳大小限制，單位B */ "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取圖片格式顯示 */ /* 上傳視頻配置 */ "videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */ "videoFieldName": "upfile", /* 提交的視頻表單名稱 */ "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */ "videoUrlPrefix": "", /* 視頻訪問路徑前綴 */ "videoMaxSize": 102400000, /* 上傳大小限制，單位B，默認100MB */ "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上傳視頻格式顯示 */ /* 上傳文件配置 */ "fileActionName": "uploadfile", /* controller裏,執行上傳視頻的action名稱 */ "fileFieldName": "upfile", /* 提交的文件表單名稱 */ "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */ "fileUrlPrefix": "", /* 文件訪問路徑前綴 */ "fileMaxSize": 51200000, /* 上傳大小限制，單位B，默認50MB */ "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" ], /* 上傳文件格式顯示 */ /* 列出指定目錄下的圖片 */ "imageManagerActionName": "listimage", /* 執行圖片管理的action名稱 */ "imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出圖片的目錄 */ "imageManagerListSize": 20, /* 每次列出文件數量 */ "imageManagerUrlPrefix": "", /* 圖片訪問路徑前綴 */ "imageManagerInsertAlign": "none", /* 插入的圖片浮動方式 */ "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件類型 */ /* 列出指定目錄下的文件 */ "fileManagerActionName": "listfile", /* 執行文件管理的action名稱 */ "fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目錄 */ "fileManagerUrlPrefix": "", /* 文件訪問路徑前綴 */ "fileManagerListSize": 20, /* 每次列出文件數量 */ "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" ] /* 列出的文件類型 */ }
imageUrlPrefix+imagePathFormat是圖片的訪問路徑，也是圖片顯示的關鍵。spring
uploadRoot是我新增長的鍵，對應的value是圖片上傳絕對路徑。apache
正常狀況下，在加載ueditor編輯器時，會訪問ueditor/jsp/controller.jsp:json
controller.jsp代碼：後端
request.setCharacterEncoding( "utf-8" ); response.setHeader("Content-Type" , "text/html"); String rootPath = application.getRealPath( "/" ); System.out.println(rootPath); out.write( new ActionEnter( request, rootPath ).exec() );
在這裏解析的config.json，mvc
在建立ActionEnter實例的時候，初始化ConfigManager類，其中ConfigManager類是關鍵。
百度源代碼：
1 // 2 // Source code recreated from a .class file by IntelliJ IDEA 3 // (powered by Fernflower decompiler) 4 // 5 6 package com.baidu.ueditor; 7 8 import java.io.BufferedReader; 9 import java.io.File; 10 import java.io.FileInputStream; 11 import java.io.FileNotFoundException; 12 import java.io.IOException; 13 import java.io.InputStreamReader; 14 import java.io.UnsupportedEncodingException; 15 import java.util.HashMap; 16 import java.util.Map; 17 import org.json.JSONArray; 18 import org.json.JSONObject; 19 20 public final class ConfigManager { 21 private final String rootPath;//絕對根路徑 22 private final String originalPath; 23 private final String contextPath; 24 private static final String configFileName = "config.json"; 25 private String parentPath = null;//controller.jsp的上級目錄路徑 26 private JSONObject jsonConfig = null;//解析config.json後的json對象 27 private static final String SCRAWL_FILE_NAME = "scrawl"; 28 private static final String REMOTE_FILE_NAME = "remote"; 29 30 private ConfigManager(String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException { 31 rootPath = rootPath.replace("\\", "/"); 32 this.rootPath = rootPath; 33 this.contextPath = contextPath; 34 if(contextPath.length() > 0) { 35 this.originalPath = this.rootPath + uri.substring(contextPath.length()); 36 } else { 37 this.originalPath = this.rootPath + uri; 38 } 39 40 this.initEnv(); 41 } 42 43 public static ConfigManager getInstance(String rootPath, String contextPath, String uri) { 44 try { 45 return new ConfigManager(rootPath, contextPath, uri); 46 } catch (Exception var4) { 47 return null; 48 } 49 } 50 51 public boolean valid() { 52 return this.jsonConfig != null; 53 } 54 55 public JSONObject getAllConfig() { 56 return this.jsonConfig; 57 } 58 59 public Map<String, Object> getConfig(int type) { 60 HashMap conf = new HashMap(); 61 String savePath = null; 62 switch(type) { 63 case 1: 64 conf.put("isBase64", "false"); 65 conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("imageMaxSize"))); 66 conf.put("allowFiles", this.getArray("imageAllowFiles")); 67 conf.put("fieldName", this.jsonConfig.getString("imageFieldName")); 68 savePath = this.jsonConfig.getString("imagePathFormat"); 69 break; 70 case 2: 71 conf.put("filename", "scrawl"); 72 conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("scrawlMaxSize"))); 73 conf.put("fieldName", this.jsonConfig.getString("scrawlFieldName")); 74 conf.put("isBase64", "true"); 75 savePath = this.jsonConfig.getString("scrawlPathFormat"); 76 break; 77 case 3: 78 conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("videoMaxSize"))); 79 conf.put("allowFiles", this.getArray("videoAllowFiles")); 80 conf.put("fieldName", this.jsonConfig.getString("videoFieldName")); 81 savePath = this.jsonConfig.getString("videoPathFormat"); 82 break; 83 case 4: 84 conf.put("isBase64", "false"); 85 conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("fileMaxSize"))); 86 conf.put("allowFiles", this.getArray("fileAllowFiles")); 87 conf.put("fieldName", this.jsonConfig.getString("fileFieldName")); 88 savePath = this.jsonConfig.getString("filePathFormat"); 89 break; 90 case 5: 91 conf.put("filename", "remote"); 92 conf.put("filter", this.getArray("catcherLocalDomain")); 93 conf.put("maxSize", Long.valueOf(this.jsonConfig.getLong("catcherMaxSize"))); 94 conf.put("allowFiles", this.getArray("catcherAllowFiles")); 95 conf.put("fieldName", this.jsonConfig.getString("catcherFieldName") + "[]"); 96 savePath = this.jsonConfig.getString("catcherPathFormat"); 97 break; 98 case 6: 99 conf.put("allowFiles", this.getArray("fileManagerAllowFiles")); 100 conf.put("dir", this.jsonConfig.getString("fileManagerListPath")); 101 conf.put("count", Integer.valueOf(this.jsonConfig.getInt("fileManagerListSize"))); 102 break; 103 case 7: 104 conf.put("allowFiles", this.getArray("imageManagerAllowFiles")); 105 conf.put("dir", this.jsonConfig.getString("imageManagerListPath")); 106 conf.put("count", Integer.valueOf(this.jsonConfig.getInt("imageManagerListSize"))); 107 } 108 109 conf.put("savePath", savePath); 110 conf.put("rootPath", this.rootPath); 111 return conf; 112 } 113 114 private void initEnv() throws FileNotFoundException, IOException { 115 File file = new File(this.originalPath); 116 if(!file.isAbsolute()) { 117 file = new File(file.getAbsolutePath()); 118 } 119 120 this.parentPath = file.getParent(); 121 String configContent = this.readFile(this.getConfigPath()); 122 123 try { 124 JSONObject e = new JSONObject(configContent); 125 this.jsonConfig = e; 126 } catch (Exception var4) { 127 this.jsonConfig = null; 128 } 129 130 } 131 132 private String getConfigPath() { 133 return this.parentPath + File.separator + "config.json"; 134 } 135 136 private String[] getArray(String key) { 137 JSONArray jsonArray = this.jsonConfig.getJSONArray(key); 138 String[] result = new String[jsonArray.length()]; 139 int i = 0; 140 141 for(int len = jsonArray.length(); i < len; ++i) { 142 result[i] = jsonArray.getString(i); 143 } 144 145 return result; 146 } 147 148 private String readFile(String path) throws IOException { 149 StringBuilder builder = new StringBuilder(); 150 151 try { 152 InputStreamReader reader = new InputStreamReader(new FileInputStream(path), "UTF-8"); 153 BufferedReader bfReader = new BufferedReader(reader); 154 String tmpContent = null; 155 156 while((tmpContent = bfReader.readLine()) != null) { 157 builder.append(tmpContent); 158 } 159 160 bfReader.close(); 161 } catch (UnsupportedEncodingException var6) { 162 ; 163 } 164 165 return this.filter(builder.toString()); 166 } 167 168 private String filter(String input) { 169 return input.replaceAll("/\\*[\\s\\S]*?\\*/", ""); 170 } 171 }
其中
private String getConfigPath() { return this.parentPath + File.separator + "config.json"; }
這方法是拼全config.json的絕對路徑，可是parentPath是controller.jsp 的目錄路徑，因此限制config.json 必須和controller.jsp在同一個目錄下。當用spring或者其餘代替controller.jsp時，就會找不到這個json文件。
因此這個地方我直接改成
//修改 private String getConfigPath() { return this.rootPath + File.separator + "WEB-INF" + File.separator + "classes"+File.separator + "config.json"; }
固然這個地方您能夠隨意發揮。
再者，關於上傳文件路徑配置問題，在源碼中下載圖片的類是BinaryUploader，
1 // 2 // Source code recreated from a .class file by IntelliJ IDEA 3 // (powered by Fernflower decompiler) 4 // 5 6 package com.baidu.ueditor.upload; 7 8 import com.baidu.ueditor.PathFormat; 9 import com.baidu.ueditor.define.BaseState; 10 import com.baidu.ueditor.define.FileType; 11 import com.baidu.ueditor.define.State; 12 import org.apache.commons.fileupload.FileItemIterator; 13 import org.apache.commons.fileupload.FileItemStream; 14 import org.apache.commons.fileupload.FileUploadException; 15 import org.apache.commons.fileupload.disk.DiskFileItemFactory; 16 import org.apache.commons.fileupload.servlet.ServletFileUpload; 17 18 import javax.servlet.http.HttpServletRequest; 19 import java.io.IOException; 20 import java.io.InputStream; 21 import java.util.Arrays; 22 import java.util.List; 23 import java.util.Map; 24 25 public class BinaryUploader { 26 public BinaryUploader() { 27 } 28 29 public static final State save(HttpServletRequest request, Map<String, Object> conf) { 30 FileItemStream fileStream = null; 31 boolean isAjaxUpload = request.getHeader("X_Requested_With") != null; 32 if(!ServletFileUpload.isMultipartContent(request)) { 33 return new BaseState(false, 5); 34 } else { 35 ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory()); 36 if(isAjaxUpload) { 37 upload.setHeaderEncoding("UTF-8"); 38 } 39 40 try { 41 for(FileItemIterator e = upload.getItemIterator(request); e.hasNext(); fileStream = null) { 42 fileStream = e.next(); 43 if(!fileStream.isFormField()) { 44 break; 45 } 46 } 47 48 if(fileStream == null) { 49 return new BaseState(false, 7); 50 } else { 51 String savePath = (String)conf.get("savePath"); 52 String originFileName = fileStream.getName(); 53 String suffix = FileType.getSuffixByFilename(originFileName); 54 originFileName = originFileName.substring(0, originFileName.length() - suffix.length()); 55 savePath = savePath + suffix; 56 long maxSize = ((Long)conf.get("maxSize")).longValue(); 57 if(!validType(suffix, (String[])conf.get("allowFiles"))) { 58 59 return new BaseState(false, 8); 60 61 } else { 62 63 savePath = PathFormat.parse(savePath, originFileName); 64 String physicalPath = (String)conf.get("rootPath") + savePath; 65 InputStream is = fileStream.openStream(); 66 State storageState = StorageManager.saveFileByInputStream(is, physicalPath, maxSize); 67 is.close(); 68 if(storageState.isSuccess()) { 69 storageState.putInfo("url", PathFormat.format(savePath)); 70 storageState.putInfo("type", suffix); 71 storageState.putInfo("original", originFileName + suffix); 72 } 73 return storageState; 74 } 75 } 76 } catch (FileUploadException var14) { 77 return new BaseState(false, 6); 78 } catch (IOException var15) { 79 return new BaseState(false, 4); 80 } 81 } 82 } 83 84 private static boolean validType(String type, String[] allowTypes) { 85 List list = Arrays.asList(allowTypes); 86 return list.contains(type); 87 } 88 }
在第64行中，String physicalPath = (String)conf.get("rootPath") + savePath; 就是上傳圖片最後的路徑。其中rootPath是根路徑，savePath是自定義的圖片保存路徑（imagePathFormat對應的值），在源碼中rootPath已被限制爲網站根目錄，因此在這裏須要改變爲自定義的路徑。
其中ConfigManager類中第109，110這裏傳入的路徑字符串，只需將這改成
conf.put("savePath", savePath);
conf.put("rootPath", this.jsonConfig.getString("uploadRoot"));
就能夠了。
最後，controller.jsp的替代方法：
利用攔截器：
1 package com.imp.filter; 2 3 import com.baidu.ueditor.ActionEnter; 4 5 import javax.servlet.*; 6 import javax.servlet.annotation.WebFilter; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 import java.io.IOException; 10 import java.util.logging.Logger; 11 12 /** 13 * Created by (IMP)鄭和明 14 * Date is 2016/12/26 15 * 16 * UEditor controller.jsp 攔截器 17 * 18 * 初始化 config,json 19 * 20 */ 21 @WebFilter(filterName = "UEditorFilter",urlPatterns = "/ueditor/jsp/controller.jsp") 22 public class UEditorFilter implements Filter { 23 private FilterConfig config; 24 25 public void destroy() { 26 27 } 28 29 public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException { 30 31 HttpServletRequest request= (HttpServletRequest) req; 32 HttpServletResponse response= (HttpServletResponse) resp; 33 request.setCharacterEncoding("utf-8"); 34 response.setHeader("Content-Type", "text/html"); 35 String rootPath= config.getServletContext().getRealPath("/"); 36 Logger.getLogger("imp").info(rootPath); 37 String res=new ActionEnter(request, rootPath).exec(); 38 response.getWriter().write(res); 39 40 } 41 public void init(FilterConfig config) throws ServletException { 42 this.config=config; 43 } 44 45 }
或者
String mvc也能夠（前提攔截全部jsp請求，而後自定義controller）（代碼（略））
代碼 github 地址 https://github.com/zhenghe1993/UEditor
，
相關文章
- 1. 百度富文本編輯器UEditor增加自定義字體
- 2. 百度Editor文本編輯器
- 3. vue-cli 使用百度富文本編輯器插件【Editor】
- 4. 富文本編輯vue-quill-editor自定義圖片、文件上傳
- 5. 【6】富文本編輯vue-quill-editor自定義圖片上傳、 token 驗證
- 6. Vue開發--富文本編輯vue-quill-editor自定義圖片上傳
- 7. 類百度富文本編輯器文件上傳。
- 8. React Editor - 富文本編輯器推薦
- 9. 百度富文本編輯器UEDITOR
- 10. 使用百度富文本編輯器
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • XML 編輯器 - XML 教程
- • RxJava操作符（十）自定義操作符
- • NewSQL-TiDB相關
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
