生活随笔
收集整理的這篇文章主要介紹了
Ueditor 使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
官方網站https://fex.baidu.com/ueditor/
1. 安裝Ueditor
- 前往官網下載，選擇發布版
- 選擇合適的版本，如 utf8-jsp
- 下載，解壓后目錄結構如下
使用前配置
- 進入jsp/lib目錄
- 在本地Maven倉庫安裝 ueditor jar包(如果沒有使用Maven管理jar的話，需要將jar包加入項目依賴中)。
cd 目錄
mvn install:install-file -Dfile
=ueditor-1.1.2.jar -DgroupId
=com.baidu -DartifactId
=ueditor -Dversion
=1.1.2 -Dpackaging
=jar
- 打開項目，將 utf-jsp 目錄下所有內容復制到某個靜態資源目錄。如我這里將資源放在ueditor下。
- 配置ueditor資源根路徑（注意：這里需要根據自己的項目的classpath情況來設置）
測試使用
參考官網https://fex.baidu.com/ueditor/#start-start
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title
</title>
</head>
<body><script id="container" name="content" type="text/plain">這里寫你的初始化內容</script><script type="text/javascript" src="/ueditor.config.js"></script><script type="text/javascript" src="/ueditor.all.js"></script><script type="text/javascript">var ue = UE.getEditor('container');</script></body>
</html>
訪問：localhost:8080/index.html 試一試
測試圖片上傳
這里Ueditor中的圖片上傳配置文件不知道為什么，解析起來有問題。
自定義解析config.json和圖片上傳的方法
嘗試自定義解析config.json和圖片上傳的方法
-
參考 controller.jsp文件
-
能夠看出 ActionMap中的key 即是 /jsp/controller.jsp?action=param 的參數。
-
知道這一點，加上controller.jsp中的ActionEnter中的一下方法作為參考，我們就可以開始重現我們自定義的方法了
-
編寫自定義方法 代替 /jsp/controller?action=param方法
package com.bmos.ueditor.controller;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.lang3.time.DateFormatUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("/ueditor")
public class UeditorController {@RequestMapping("/invoke")public void handle(MultipartFile upfile
, HttpServletRequest request
, HttpServletResponse response
) throws JsonProcessingException {
String action
= request
.getParameter("action");String result
= null;if ("config".equals(action
)){StringBuilder configContent
= new StringBuilder();try (BufferedReader br
= new BufferedReader(new InputStreamReader(UeditorController.class.getResourceAsStream("/ueditor-config.json")))){String line
= null;while ((line
= br
.readLine()) != null){configContent
.append(line
);}} catch (IOException e
) {e
.printStackTrace();}result
= configContent
.toString().replaceAll("/\\*[\\s\\S]*?\\*/", "").replaceAll(" ", "");}else if("uploadimage".equals(action
)){Map<String, Object> resultMap
= new HashMap<>();ObjectMapper om
= new ObjectMapper();try {String originalFilename
= upfile
.getOriginalFilename();String suffix
= originalFilename
.substring(originalFilename
.indexOf(".") + 1 ,originalFilename
.length());String realFilePath
="C:/wguo/docker-volums/tomcat/webapps/ROOT/";String url
= "image/"+ DateFormatUtils.format(new Date(), "yyyy-MM-dd")+"/" + System.currentTimeMillis()+"."+suffix
;File realFile
= new File(realFilePath
+url
);if(!realFile
.getParentFile().exists()){realFile
.getParentFile().mkdirs();}upfile
.transferTo(realFile
);resultMap
.put("state", "SUCCESS");resultMap
.put("size", upfile
.getSize());resultMap
.put("title", originalFilename
);resultMap
.put("url", "http://127.0.0.1:58080"+"/" + url
);resultMap
.put("title", suffix
);resultMap
.put("original", originalFilename
);result
= om
.writeValueAsString(resultMap
);} catch (IOException e
) {e
.printStackTrace();resultMap
.put("state", "IO錯誤");result
= om
.writeValueAsString(resultMap
);}}PrintWriter writer
= null;try {writer
= response
.getWriter();writer
.write(result
);writer
.flush();} catch (IOException e
) {e
.printStackTrace();}finally {writer
.close();}}
}
總結
以上是生活随笔為你收集整理的Ueditor 使用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
