前言
官方网站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
- 创建index文件
<!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;
/**
* @Author: l
* @Date: 2022/3/25 13:19
* @Description:
*/
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping("/invoke")
public void handle(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response) throws JsonProcessingException {
// response.setCharacterEncoding("utf-8");
// response.setContentType("text/html");
//1.获取action参数
String action = request.getParameter("action");
String result = null;
//2.根据action做出相应的处理
if ("config".equals(action)){
// 2.1 处理读取配置文件
// 我们可以将ueditor/jsp/config.json拿到我们放置配置文件的位置，如这里我将其放到resource下(最好改一下名字)
//2.2 读取config.json
//InputStream inputStream = UeditorController.class.getResourceAsStream("/ueditor-config.json");
//InputStreamReader reader = new InputStreamReader(inputStream);
//BufferedReader br = new BufferedReader(reader);
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)){
//2.2 处理上传图片
//参考ActionEnter invoke()方法 Uploader.doExec 其反回值格式应为：
/**
* 以UTF8编码为例：
* {
* "state" : AppInfo.info中的某个值，如 true-对应的AppInfo.info的key为0，值为SUCCESS
* “size” : targetFile.length()
* "title" ： targetFile.getName()
* //下面这些只有成功才有
* “url”： PathFormat.format(savePath)
* “type”: suffix
* "original" : originFileName + suffix
* }
*/
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();
}
}
}
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
