先貼出官網文檔地址：http://fex.baidu.com/ueditor/
前端部分
1、下載源碼：https://github.com/fex-team/ueditor#ueditor，我使用的是ueditor-dev-1.4.3
2、解壓后用VSCode打開，目錄如下：
3、修改ueditor.config.js
說明：我用的VSCode的插件Live Server運行的前端項目，為防止跨域問題，要設置一下代理
4、在_examples目錄下新建文件mytest.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="editor_api.js"></script> </head> <body> <script type="text/plain" id="editor" style="margin-bottom:100px;"></script> <script type="text/javascript"> UE.getEditor('editor', { theme:"default", //皮膚 lang:'zh-cn' //語言 }); </script> </body> </html>
后端部分
1、引入依賴
<dependency> <groupId>com.gitee.qdbp.thirdparty</groupId> <artifactId>ueditor</artifactId> <version>1.4.3.3</version> </dependency>
2、修改config.json文件
"imageUrlPrefix": "http://localhost:8888", /* 圖片訪問路徑前綴 */
"imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
說明：文件的保存路徑是：項目根目錄+imagePathFormat，返回的地址是：imageUrlPrefix + imagePathFormat
3、java代碼示例
@RestController
public class FileController {
@RequestMapping("/file/upload")
public void get(HttpServletRequest request, HttpServletResponse response){
try {
String rootPath = "xxxx";
String configPath = "/src/main/resources/static/ueditor";
String exec = new ActionEnter(request, rootPath, configPath ).exec();
PrintWriter write = response.getWriter();
write.write(exec);
write.flush();
write.close();
}catch (Exception e){
e.printStackTrace();
}
}
}
說明：rootPath是項目名稱，configPath是config.json的同級目錄
（其實/ueditor可以隨意寫，不存在的路徑也行，比如/src/main/resources/static/aaaaa，但必須與config.json同級）如下：
4、映射路徑可直接訪問
@SpringBootConfiguration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/upload/image/**") .addResourceLocations("file:D:/workset/javaset/project/official/BLOG/xxxx/upload/image/"); } }
說明：方法的含義是如果路徑匹配到/upload/image/開頭的路徑，則將映射地址替換為D:/workset/javaset/project/official/BLOG/xxxx/upload/image/
比如：http://localhost:8888/upload/image/20220316/1647438546721003297.png 實際訪問的是 D:/workset/javaset/project/official/BLOG/xxxx/upload/image//20220316/1647438546721003297.png
演示
運行http://127.0.0.1:8888/ueditor/_examples/mytest.html
備注：上面的相關配置是針對前后端分離項目的，如果不采用前后端分離，只需把整個ueditor的內容copy到java工程中，同時修改ueditor.config.js文件
看來與config.json同一級的目錄應該是整個ueditor，只不過在前后端分離中用不着罷了
將項目打包成jar文件，上傳功能不好用？
上面的例子在idea中或打成war包時可以運行，但是打成jar包還是無法運行，這是因為在jar包中讀取配置文件config.json失敗，需要修改源碼。
為了省事我直接把config.json拿到jar外面了，配置文件路徑：D:\ueditor\config.json。同時做如下修改：
修改config.json文件：
"imageUrlPrefix": "http://localhost:8888", /* 圖片訪問路徑前綴 */ "imagePathFormat": "D:/ueditor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
修改FileController：
@RestController public class FileController { @RequestMapping("/file/upload") public void get(HttpServletRequest request, HttpServletResponse response){ try { String rootPath = ""; String configPath = "D:/ueditor/upload";//與config.json同路徑 String exec = new ActionEnter(request, rootPath, configPath ).exec(); exec = exec.replaceAll("D:",""); PrintWriter write = response.getWriter(); write.write(exec); write.flush(); write.close(); }catch (Exception e){ e.printStackTrace(); } } }
修改映射路徑：
@SpringBootConfiguration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/ueditor/upload/image/**") .addResourceLocations("file:D:/ueditor/upload/image/"); } }
這樣將項目打成jar文件運行，上傳功能就沒有問題了。