當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

SpringBoot2.x 整合 Ueditor

發布時間：2024/9/27 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 SpringBoot2.x 整合 Ueditor 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- - - - 一、基礎準備
      - 1. 創建項目并引入依賴
        2. 下載Ueditor源碼
        3. Java代碼整合
        4. 靜態文件整合
      - 二、靜態頁面+控制層
      - 2.1. index.html
        2.2. demo1.html
        2.3. demo2.html
        2.4. demo3.html
        2.5. Controller
      - 三、配置調整
      - 3.1. 圖片大小
        3.2. 修改ueditor.config.js
        3.3. 修改config.json文件
        3.4. 修改BinaryUploader
        3.5. 修改ConfigManage類
        3.6. 設置圖片在Ueditor中回顯

一、基礎準備

1. 創建項目并引入依賴

boot-ueditor

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.4</version><relativePath/> </parent><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>20190722</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.2</version></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.9</version></dependency>

2. 下載Ueditor源碼

下載地址：https://github.com/fex-team/ueditor/tree/dev-2.0.0

3. Java代碼整合

將ueditor-dev-2.0.0版本\ueditor\jsp\src下的com文件夾整體復制到項目Java目錄下面

4. 靜態文件整合

①把ueditor整個文件夾復制到static目錄下面
②把ueditor\jsp\config.json復制到ueditor的根目錄下面
③在resources目錄下面創建js文件夾存放jquery2.1.3.min.js

二、靜態頁面+控制層

在resources目錄下面創建templates

2.1. index.html

<!DOCTYPE> <html xmlns:th="http://www.thymeleaf.org"> <head><title>完整demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" charset="utf-8" th:src="@{ueditor/ueditor.config.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/ueditor.all.js}"> </script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/lang/zh-cn/zh-cn.js}"></script><style type="text/css">div{width:100%;}</style> </head> <body> <div><h1>完整demo</h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> </div> <div id="btns"><div><button onclick="getAllHtml()">獲得整個html的內容</button><button onclick="getContent()">獲得內容</button><button onclick="setContent()">寫入內容</button><button onclick="setContent(true)">追加內容</button><button onclick="getContentTxt()">獲得純文本</button><button onclick="getPlainTxt()">獲得帶格式的純文本</button><button onclick="hasContent()">判斷是否有內容</button><button onclick="setFocus()">使編輯器獲得焦點</button><button onmousedown="isFocus(event)">編輯器是否獲得焦點</button><button onmousedown="setblur(event)" >編輯器失去焦點</button></div><div><button onclick="getText()">獲得當前選中的文本</button><button onclick="insertHtml()">插入給定的內容</button><button id="enable" onclick="setEnabled()">可以編輯</button><button onclick="setDisabled()">不可編輯</button><button onclick=" UE.getEditor('editor').setHide()">隱藏編輯器</button><button onclick=" UE.getEditor('editor').setShow()">顯示編輯器</button><button onclick=" UE.getEditor('editor').setHeight(300)">設置高度為300默認關閉了自動長高</button></div><div><button onclick="getLocalData()" >獲取草稿箱內容</button><button onclick="clearLocalData()" >清空草稿箱</button></div></div> <div><button onclick="createEditor()">創建編輯器</button><button onclick="deleteEditor()">刪除編輯器</button> </div><script type="text/javascript">//實例化編輯器//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例var ue = UE.getEditor('editor');function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}function insertHtml() {var value = prompt('插入html代碼', '');UE.getEditor('editor').execCommand('insertHtml', value)}function createEditor() {enableBtn();UE.getEditor('editor');}function getAllHtml() {alert(UE.getEditor('editor').getAllHtml())}function getContent() {var arr = [];arr.push("使用editor.getContent()方法可以獲得編輯器的內容");arr.push("內容為：");arr.push(UE.getEditor('editor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使用editor.getPlainTxt()方法可以獲得編輯器的帶格式的純文本內容");arr.push("內容為：");arr.push(UE.getEditor('editor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使用editor.setContent('歡迎使用ueditor')方法可以設置編輯器的內容");UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UE.getEditor('editor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UE.getEditor('editor').setEnabled();enableBtn();}function getText() {//當你點擊按鈕時編輯區域已經失去了焦點，如果直接用getText將不會得到內容，所以要在選回來，然后取得內容var range = UE.getEditor('editor').selection.getRange();range.select();var txt = UE.getEditor('editor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使用editor.getContentTxt()方法可以獲得編輯器的純文本內容");arr.push("編輯器的純文本內容為：");arr.push(UE.getEditor('editor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使用editor.hasContents()方法判斷編輯器里是否有內容");arr.push("判斷結果為：");arr.push(UE.getEditor('editor').hasContents());alert(arr.join("\n"));}function setFocus() {UE.getEditor('editor').focus();}function deleteEditor() {disableBtn();UE.getEditor('editor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {UE.dom.domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}function enableBtn() {var div = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {UE.dom.domUtils.removeAttributes(btn, ["disabled"]);}}function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" ));}function clearLocalData () {UE.getEditor('editor').execCommand( "clearlocaldata" );alert("已清空草稿箱")} </script> </body> </html>

2.2. demo1.html

<html xmlns:th="http://www.thymeleaf.org"> <head><title>UEditor Demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" th:src="@{js/jquery2.1.3.min.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/ueditor.config.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/ueditor.all.js}"> </script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/lang/zh-cn/zh-cn.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/third-party/video-js/video-js.css}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/third-party/video-js/video.js}"></script></head> <body><div><h1>完整demo</h1><textarea id="editor" type="text/plain" style="width:95%;height:500px;"></textarea></div><button onclick="getContent()">獲得內容</button><script type="text/javascript">//實例化編輯器//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例let ue = UE.getEditor('editor');function getContent() {let arr = [];arr.push(ue.getContent());$.post("ueditor/d1",arr.join("\n"));}</script> </body> </html>

2.3. demo2.html

<html xmlns:th="http://www.thymeleaf.org"> <head><title>UEditor Demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" th:src="@{js/jquery2.1.3.min.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/ueditor.config.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/ueditor.all.js}"> </script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/lang/zh-cn/zh-cn.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/third-party/video-js/video-js.css}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/third-party/video-js/video.js}"></script> </head> <body><div><h1>完整demo</h1><textarea id="editor" type="text/plain" style="width:95%;height:500px;"></textarea></div><button onclick="getContent()">獲得內容</button><script type="text/javascript">//實例化編輯器let ue = UE.getEditor('editor');function getContent() {let arr = [];arr.push(ue.getContent());$.post("ueditor/d2","data="+arr.join("\n"));}</script> </body> </html>

2.4. demo3.html

<html xmlns:th="http://www.thymeleaf.org"> <head><title>UEditor Demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" th:src="@{js/jquery2.1.3.min.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/ueditor.config.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/ueditor.all.js}"> </script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/lang/zh-cn/zh-cn.js}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/third-party/video-js/video-js.css}"></script><script type="text/javascript" charset="utf-8" th:src="@{ueditor/third-party/video-js/video.js}"></script> </head> <body><form th:action="@{ueditor/d3}">姓名：<input type="text" name="name" id="name"><br>簡介：<textarea id="info" type="text/plain" style="width:95%;height:200px;"></textarea><input type="submit" value="提交"></form><script type="text/javascript">//實例化編輯器let ue = UE.getEditor('info');</script> </body> </html>

2.5. Controller

DispatcherController

package com.baidu.ueditor.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;@Controller public class DispatcherController {@RequestMapping("/index")public String index() {return "index";}@RequestMapping("/demo1")public String demo1() {return "demo1";}@RequestMapping("/demo2")public String demo2() {return "demo2";}@RequestMapping("/demo3")public String demo3() {return "demo3";} }

UEditorController

package com.baidu.ueditor.controller;import com.baidu.ueditor.ActionEnter; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.ServletInputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*;@Controller @RequestMapping("/ueditor") public class 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) {e.printStackTrace();}}///@ResponseBody@RequestMapping("/d1")public void demo1(HttpServletRequest request) throws IOException {ServletInputStream is = request.getInputStream();String str = inputStream2String(is, "UTF-8");System.out.println("用戶在UEditor中輸入的內容是：" + str);}public static String inputStream2String(InputStream is, String encode) {String str = "";try {if (encode == null || encode.equals("")) {encode = "utf-8";// 默認以utf-8形式}BufferedReader br = new BufferedReader(new InputStreamReader(is, encode));StringBuffer sb = new StringBuffer();while ((str = br.readLine()) != null) {sb.append(str).append("\n");}return sb.toString();} catch (IOException e) {e.printStackTrace();}return str;}@ResponseBody@RequestMapping("/d2")public void demo2(HttpServletRequest request) throws IOException {String data = request.getParameter("data");System.out.println(data);}@ResponseBody@RequestMapping("/d3")public void demo3(String name,String editorValue) throws IOException {System.out.println("doGet");System.out.println(name);System.out.println(editorValue);} }

三、配置調整

3.1. 圖片大小

當用戶上傳的圖片太大時，為了不讓Ueditor不出現水平滾動軸，可以修改ueditor.all.js文件以及ueditor.all.mini.js文件

3.2. 修改ueditor.config.js

修改ueditor.config.js文件，在其中指定Ueditor請求的服務器端的路徑：

3.3. 修改config.json文件

修改config.json文件，為其添加一個表示上傳資料基本路徑的變量basePath

3.4. 修改BinaryUploader

修改BinaryUploader的save()方法的代碼如下

public static final State save(HttpServletRequest request,Map<String, Object> conf) {// FileItemStream fileStream = null;// boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;if (!ServletFileUpload.isMultipartContent(request)) {return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);}// ServletFileUpload upload = new ServletFileUpload(// new DiskFileItemFactory());//// if ( isAjaxUpload ) {// upload.setHeaderEncoding( "UTF-8" );// }try {// FileItemIterator iterator = upload.getItemIterator(request);//// while (iterator.hasNext()) {// fileStream = iterator.next();//// if (!fileStream.isFormField())// break;// fileStream = null;// }//// if (fileStream == null) {// return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);// }MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());if(multipartFile==null){return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);}String savePath = (String) conf.get("savePath");//String originFileName = fileStream.getName();String originFileName = multipartFile.getOriginalFilename();String suffix = FileType.getSuffixByFilename(originFileName);originFileName = originFileName.substring(0,originFileName.length() - suffix.length());savePath = savePath + suffix;long maxSize = ((Long) conf.get("maxSize")).longValue();if (!validType(suffix, (String[]) conf.get("allowFiles"))) {return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);}savePath = PathFormat.parse(savePath, originFileName);//String physicalPath = (String) conf.get("rootPath") + savePath;String basePath=(String) conf.get("basePath");String physicalPath = basePath + savePath;//InputStream is = fileStream.openStream();InputStream is = multipartFile.getInputStream();State storageState = StorageManager.saveFileByInputStream(is,physicalPath, maxSize);is.close();if (storageState.isSuccess()) {storageState.putInfo("url", PathFormat.format(savePath));storageState.putInfo("type", suffix);storageState.putInfo("original", originFileName + suffix);}return storageState;// } catch (FileUploadException e) {// return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);} catch (IOException e) {}return new BaseState(false, AppInfo.IO_ERROR);}

3.5. 修改ConfigManage類

修改成員變量configFileName的值為config.json的路徑值：

private static final String configFileName = "static/ueditor/config.json";

在getConfig()方法的return語句之前添加如下代碼：

//將basePath塞進confconf.put("basePath", this.jsonConfig.getString("basePath"));conf.put("savePath", savePath);conf.put("rootPath", this.rootPath);

修改initEnv()方法
為了讓項目在打包后能正常夠上傳文件/圖片，修改initEnv()方法用Class類的getResourceAsStream()來讀取文件

private void initEnv() throws FileNotFoundException, IOException {File file = new File(this.originalPath);if (!file.isAbsolute()) {file = new File(file.getAbsolutePath());}this.parentPath = file.getParent();//String configContent = this.readFile(this.getConfigPath());String configContent = this.filter(IOUtils.toString(this.getClass().getClassLoader().getResourceAsStream(configFileName)));try {JSONObject jsonConfig = new JSONObject(configContent);this.jsonConfig = jsonConfig;} catch (Exception e) {this.jsonConfig = null;} }

修改getConfigPath()方法的代碼如下：

private String getConfigPath() {try {//獲取classpath下的config.json路徑return this.getClass().getClassLoader().getResource(configFileName).toURI().getPath();} catch (URISyntaxException e) {return this.parentPath + File.separator + ConfigManager.configFileName;} }

3.6. 設置圖片在Ueditor中回顯

因為我們把圖片存在E盤了，而spring并沒有對E盤目錄進行映射。只有按如下所示在application.properties文件加入路徑映射，上傳成功的圖片在Ueditor中才才能回顯：

spring:servlet:#設置SpringBoot內置tomcat允許上傳圖片的大小multipart:max-file-size: 100MBmax-request-size: 1000MB#路徑映射，Ueditor上傳圖片成功后回顯用resources:static-locations: classpath:static/,file:static/,file:D:/ueditor

總結

以上是生活随笔為你收集整理的SpringBoot2.x 整合 Ueditor的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Ueditor

上一篇：类选择器遍历赋值_利用反射实现配置表数据
下一篇： SpringBoot2 整合 CXF 服