ruoyi整合ueditor
若依把原有的summernote富文本编辑器换成ueditor首先去网站下载ueditor-jsp源码最新版，或者可以网盘下载：链接：https://pan.baidu.com/s/1ZLbYxl-mUxeYbW6UVsAGgg提取码：lwts重命名为ueditor把jsp文件夹单独拿出来，其他的放到admin/resources/static/ajax/libs/jsp里面的config.jso
·
若依把原有的summernote富文本编辑器换成ueditor
首先去网站下载ueditor-jsp源码最新版，或者可以网盘下载：
链接：https://pan.baidu.com/s/1ZLbYxl-mUxeYbW6UVsAGgg
提取码：lwts
重命名为ueditor
把jsp文件夹单独拿出来，其他的放到admin/resources/static/ajax/libs/ jsp里面的config.json文件放到resources下面，再到include.html里面引入js文件
<!-- ueditor富文本编辑器插件 -->
<div th:fragment="ueditor">
<script th:src="@{/ajax/libs/ueditor/ueditor.config.js}"></script>
<script th:src="@{/ajax/libs/ueditor/ueditor.all.min.js}"></script>
<script th:src="@{/ajax/libs/ueditor/lang/zh-cn/zh-cn.js}"></script>
</div>
后端代码（辅助工具）
链接：https://pan.baidu.com/s/1FyIVpm98Y3dHJ1nPoPG_PQ
提取码：5780
除此之外还需要自己写一个Controller类，
/**
* @author : hermit
*/
@Controller
@RequestMapping("/managerImg")
public class ImgResourceCtrl {
private Logger logger = LoggerFactory.getLogger(ImgResourceCtrl.class);
@Autowired
private UploadUtil uploadUtil;
/**
* ueditor配置文件名称
*/
@Value("${uEditorConfig.fileName}")
private String configFileName;
/**
* 上传图片(layui富文本)
*
* @return
*/
@ResponseBody
@RequestMapping("uploadFile")
public Map uploadFile(MultipartFile file) throws Exception {
//上传
Map<String, String> stringMap = uploadUtil.uploadFile(file);
//构造返回参数
Map<String, Object> map = Maps.newHashMap();
Map<String, Object> mapData = Maps.newHashMap();
map.put("code", 0);//0表示成功，1失败
map.put("msg", "上传成功");//提示消息
map.put("data", mapData);//提示消息
mapData.put("src", stringMap.get(UploadUtil.RES_URL));//图片url
mapData.put("title", stringMap.get(UploadUtil.FILE_NAME));//图片名称，这个会显示在输入框里
return map;
}
/**
* 上传图片(百度富文件上传)
*
* @return
*/
@RequestMapping("ueditor")
public void ueditorUpload(String action, HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setContentType("application/json");
String rootPath = request.getSession().getServletContext().getRealPath("/");
if ("config".equals(action)) { //如果是初始化
// response.getWriter().write(new ActionEnter(request, ResourceUtils.getURL(ResourceUtils.CLASSPATH_URL_PREFIX).getPath()).exec());
String exec = new ActionEnter(request, rootPath,configFileName).exec();
response.getWriter().write(exec);
} else if ("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action) || "uploadscrawl".equals(action)) {
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
JSONObject jsonObject = new JSONObject();
if (multipartResolver.isMultipart(request)) {
//将request变成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
//获取multiRequest 中所有的文件名
Iterator iter = multiRequest.getFileNames();
while (iter.hasNext()) {
//一次遍历所有文件
MultipartFile file = multiRequest.getFile(iter.next().toString());
if (file != null) {
Map<String, String> uploadFile = uploadUtil.uploadFile(file);
if (!uploadFile.isEmpty()) {
jsonObject.put("state", "SUCCESS");
jsonObject.put("original", UploadUtil.ORIGINAL_FILENAME);//原来的文件名
jsonObject.put("size", uploadFile.get(UploadUtil.FILE_SIZE));
jsonObject.put("title", uploadFile.get(UploadUtil.ORIGINAL_FILENAME));
jsonObject.put("type", uploadFile.get(UploadUtil.FILE_TYPE));
jsonObject.put("url", uploadFile.get(UploadUtil.RES_URL));
}
response.getWriter().write(jsonObject.toString());
}
}
}
} else if ("catchimage".equals(action)) {
//todo 抓取远程图片(待实现)
} else if ("listimage".equals(action) || "listfile".equals(action)) {
//todo 列出指定目录下的图片/文件(待实现)
}
}
/**
* 上传图片(普通上传)
*
* @return
*/
@ResponseBody
@RequestMapping("uploadFileImg")
public AjaxResult uploadFileImg(MultipartFile file) throws Exception {
//上传
Map<String, String> stringMap = uploadUtil.uploadFile(file);
return AjaxResult.success(stringMap.get(UploadUtil.RES_URL));
}
}
找到刚刚上传的ueditor前端文件打开修改路径
修改application.yml
RuoYi是项目名，这是上传文件图片的保存路径、回显路径。根据这个uploadUrl得写一个过滤器类
@Configuration
public class WebMvcConfg implements WebMvcConfigurer {
/**
* 本地文件路径
*/
public static final String localFilePath="file:%s";
//@Value("${res.upload.path}")
@Value("${ruoyi.profile}")
private String res_upload_path;
/**
* 增加utf-8乱码
*
* @return
*/
@Bean
public FilterRegistrationBean<CharacterEncodingFilter> encodingFilterRegistration() {
CharacterEncodingFilter encodingFilter = new CharacterEncodingFilter();
encodingFilter.setEncoding("UTF-8");
encodingFilter.setForceEncoding(true);
FilterRegistrationBean<CharacterEncodingFilter> registration = new FilterRegistrationBean<CharacterEncodingFilter>(
encodingFilter);
registration.setName("encodingFilter");
registration.addUrlPatterns("/*");
registration.setAsyncSupported(true);
registration.setOrder(1);
return registration;
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**").addResourceLocations("classpath:/upload/"); registry.addResourceHandler("/temporary/**").addResourceLocations(String.format(localFilePath,res_upload_path));
registry.addResourceHandler("/**").addResourceLocations("/WEB-INF/", "classpath:/META-INF/resources/",
"classpath:/resources/", "classpath:/static/", "classpath:/public/", "classpath:/views/");
}
}
到这里ueditor都已经配置好了，就只在前端调用就好了，就以通知公告为例
把<th:block th:include=“include :: summernote-js” />替换掉，，在内容div中替换原有的
<script id="editor" name="noticeContent" type="text/plain" style="height: 300px;width: 100%;">在JavaScript把有关summernote的注释掉，激活ueditorvar ue = UE.getEditor('editor');
漏了一个UploadUtil 文件
@Component
public class UploadUtil {
/**
* 文件名称
*/
public static final String FILE_NAME = "fileName";
/**
* 文件原始名称
*/
public static final String ORIGINAL_FILENAME = "OriginalFilename";
/**
* 文件全路径
*/
public static final String RES_URL = "resURL";
/**
* 文件本地绝对路径url
*/
public static final String FILE_PATH = "filePath";
/**
* 文件大小
*/
public static final String FILE_SIZE = "fileSize";
/**
* 文件类别
*/
public static final String FILE_TYPE = "fileType";
// @Value("${res.upload.path}")
@Value("${ruoyi.profile}")
private String res_upload_path;
//@Value("${res.upload.url}")
@Value("${ruoyi.uploadUrl}")
private String res_upload_url;
/**
* 获取文件路径
*
* @param ext
* @return
*/
public static String getFileName(String ext) {
return System.currentTimeMillis() + new Random().nextInt(10000) + "." + ext;
}
/**
* 获取根路徑
*
* @return
*/
public String getFileBasePath() {
String filePath = null;
try {
filePath = ResourceUtils.getURL(ResourceUtils.CLASSPATH_URL_PREFIX).getPath();
//读取配置文上传件的路径
/*if (PropertiesUtil.getString("res.upload.path") != null) {
filePath = PropertiesUtil.getString("res.upload.path");
}*/
if (null != res_upload_path) {
filePath =res_upload_path;
}else {
filePath = filePath + "/upload/";
}
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return filePath;
}
/**
* 获取文件路径
*
* @param fileName
* @return
*/
public String getFilePath(String fileName) {
return getFileBasePath() + fileName;
}
/**
* 上传文件
*
* @param file
* @return
*/
public Map<String, String> uploadFile(MultipartFile file) throws Exception {
//原文件名称
String OriginalFilename = file.getOriginalFilename();
//文件后缀名
String ext = FilenameUtils.getExtension(OriginalFilename);
//系统生成的文件名
String fileName = getFileName(ext);
//图片上传路径
String resURL =res_upload_url;
// PropertiesUtil.getString("res.upload.url");
String filePath = getFilePath(fileName);
File saveFile = new File(filePath);
if (!saveFile.getParentFile().exists()) {
saveFile.getParentFile().mkdirs();
}
file.transferTo(saveFile);
return new ImmutableMap.Builder<String, String>()
.put(ORIGINAL_FILENAME, OriginalFilename)
.put(FILE_NAME, fileName)
.put(RES_URL, resURL + fileName)
.put(FILE_PATH, filePath)
.put(FILE_SIZE, String.valueOf(file.getSize()))
.put(FILE_TYPE, ext).build();
}
}
现在官方文档已经出了教程http://doc.ruoyi.vip/ruoyi/document/cjjc.html#%E9%9B%86%E6%88%90ueditor%E5%AE%9E%E7%8E%B0%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E5%A2%9E%E5%BC%BA
快速构建 Web 应用程序
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)