一.关于Ueditor

简介

Ueditor是一款由百度web前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。可以用于拓展ruoyi的富文本编辑工具

下载

我相信很多人打开Ueditor官网时是这样的

虽然下边有教程，但是却不能嵌入ruoyi框架。若依官方有出教程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
不相信我的可以去看官网，当然Ueditor插件可以去官网下载，因为官网的已经搭建好了。

二.集成步骤

1.下载并添加插件

链接：https://pan.baidu.com/s/1jJL4lK4909XC4C77kMN-Fg
提取码：bkej
下载后解压，将ueditor_config中的ueditor-config.json取出到ueditor文件夹外(取出后可以删掉ueditor_config文件夹)，然后将ueditor文件夹放到若依项目的admin-src-main-resources-static-ajax-lib中，此文件夹中大多都是插件，例如summernote（若依默认集成的富文本插件）

最后将取出的ueditor-config.json放到resources文件下

2.修改include页面

在admin-main-java-resources-templates目录下找的include.html文件

在最后添加ueditor，引入插件

<!-- ueditor富文本编辑器插件 -->
<div th:fragment="ueditor-js"><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>

3.修改要使用Ueditor的相关页面

以公告页面为例我们会修改两个页面，一个是新增页面(add)，还有一个编辑页面(editor)
要更换Ueditor富文本工具，我们需要将所有的summernote替换掉。由于我们下载的插件包功能都已经齐全，所以不用怕替换已经优化过的summernote。

首先修改公告的add页面

公告相关页面位置如下图

打开add页面后，将公告内容处更换为：
注：更改其他非通知页面注意更改标签的id和name或者class,下边的js中也需要随着更改

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><th:block th:include="include :: header('新增通知公告')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"><form class="form-horizontal m" id="form-notice-add"><div class="form-group"><label class="col-sm-2 control-label is-required">公告标题：</label><div class="col-sm-10"><input id="noticeTitle" name="noticeTitle" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-2 control-label">公告类型：</label><div class="col-sm-10"><select name="noticeType" class="form-control m-b" th:with="type=${@dict.getType('sys_notice_type')}"><option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option></select></div></div><div class="form-group"><label class="col-sm-2 control-label">公告内容：</label><!--在此处开始修改，如果更改其他非通知页面时，注意更改标签的id和name，下面的引用也要随之变化--><div class="col-sm-10"><script id="editor" name="noticeContent" type="text/plain" style="height: 300px;"></script></div></div><div class="form-group"><label class="col-sm-2 control-label">公告状态：</label><div class="col-sm-10"><div class="radio-box" th:each="dict : ${@dict.getType('sys_notice_status')}"><input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}"><label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label></div></div></div></form>
</div>
<th:block th:include="include :: footer" />
<!--此处修改-->
<th:block th:include="include :: ueditor-js" />
<script type="text/javascript">var prefix = ctx + "system/notice";//初始化编辑器var ue = UE.getEditor('editor');//此方法必须在外面，否则会导致下方submitHandler方法中的text定位不到function getContentTxt() {return UE.getEditor('editor').getContentTxt();}$("#form-notice-add").validate({focusCleanup: true});//替换掉原有的submitHandler方法function submitHandler() {if ($.validate.form()) {var text = getContentTxt();if (text == '' || text.length == 0) {$.modal.alertWarning("请输入公告内容！");return;}$.operate.save(prefix + "/add", $('#form-notice-add').serialize());}}
</script>
</body>
</html>

然后修改editor页面

editor页面修改类似于add，但是也有不同

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><th:block th:include="include :: header('修改通知公告')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"><form class="form-horizontal m" id="form-notice-edit" th:object="${notice}"><input id="noticeId" name="noticeId" th:field="*{noticeId}"  type="hidden"><div class="form-group"><label class="col-sm-2 control-label is-required">公告标题：</label><div class="col-sm-10"><input id="noticeTitle" name="noticeTitle" th:field="*{noticeTitle}" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-2 control-label">公告类型：</label><div class="col-sm-10"><select name="noticeType" class="form-control m-b" th:with="type=${@dict.getType('sys_notice_type')}"><option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{noticeType}"></option></select></div></div><div class="form-group"><!--同样是在内容这里开始修改--><label class="col-sm-2 control-label">公告内容：</label><div class="col-sm-10"><script id="editor" name="noticeContent" type="text/plain" style="height: 300px;"></script><textarea id="noticeContent" style="display: none;">[[*{noticeContent}]]</textarea></div></div><div class="form-group"><label class="col-sm-2 control-label">公告状态：</label><div class="col-sm-10"><div class="radio-box" th:each="dict : ${@dict.getType('sys_notice_status')}"><input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:field="*{status}"><label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label></div></div></div></form>
</div>
<th:block th:include="include :: footer" />
<!--添加ueditor-->
<th:block th:include="include :: ueditor-js" />
<script type="text/javascript">var prefix = ctx + "system/notice";//替换summernote相关的函数$(function () {var text = $("#noticeContent").text();var ue = UE.getEditor('editor');ue.ready(function () {ue.setContent(text);});})function getContentTxt() {return UE.getEditor('editor').getContentTxt();}$("#form-notice-edit").validate({focusCleanup: true});//这个同样要替换function submitHandler() {if ($.validate.form()) {var text = getContentTxt();if (text == '' || text.length == 0) {$.modal.alertWarning("请输入通知内容！");return;}$.operate.save(prefix + "/edit", $('#form-notice-edit').serialize());}}
</script>
</body>
</html>

如果页面其他的方法跟summernote无关则不需要处理,如果有相关的话根据实际情况进行处理,一般功能尽量不要耦合,不然很难去更换summernote.

4.新增UeditorController

在admin-main-java-controller-common文件夹下新增一个UeditorController,内容如下:

package com.ruoyi.web.controller.common;import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.ClassPathResource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.ruoyi.common.config.RuoYiConfig;
import com.ruoyi.common.config.ServerConfig;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.utils.file.FileUploadUtils;/*** Ueditor 请求处理** @author ruoyi*/
@SuppressWarnings("serial")
@Controller
@RequestMapping("/ajax/libs/ueditor")
public class UeditorController extends BaseController
{private final String METHOD_HEAD = "ueditor";private final String IMGE_PATH = "/ueditor/images/";private final String VIDEO_PATH = "/ueditor/videos/";private final String FILE_PATH = "/ueditor/files/";@Autowiredprivate ServerConfig serverConfig;/*** ueditor*/@ResponseBody@RequestMapping(value = "/ueditor/controller")public Object ueditor(HttpServletRequest request, @RequestParam(value = "action", required = true) String action,MultipartFile upfile) throws Exception{List<Object> param = new ArrayList<Object>(){{add(action);add(upfile);}};Method method = this.getClass().getMethod(METHOD_HEAD + action, List.class, String.class);return method.invoke(this.getClass().newInstance(), param, serverConfig.getUrl());}/*** 读取配置文件*/public JSONObject ueditorconfig(List<Object> param, String fileSuffixUrl) throws Exception{ClassPathResource classPathResource = new ClassPathResource("ueditor-config.json");String jsonString = new BufferedReader(new InputStreamReader(classPathResource.getInputStream())).lines().parallel().collect(Collectors.joining(System.lineSeparator()));JSONObject json = JSON.parseObject(jsonString, JSONObject.class);return json;}/*** 上传图片*/public JSONObject ueditoruploadimage(List<Object> param, String fileSuffixUrl) throws Exception{JSONObject json = new JSONObject();json.put("state", "SUCCESS");json.put("url", ueditorcore(param, IMGE_PATH, false, fileSuffixUrl));return json;}/*** 上传视频*/public JSONObject ueditoruploadvideo(List<Object> param, String fileSuffixUrl) throws Exception{JSONObject json = new JSONObject();json.put("state", "SUCCESS");json.put("url", ueditorcore(param, VIDEO_PATH, false, fileSuffixUrl));return json;}/*** 上传附件*/public JSONObject ueditoruploadfile(List<Object> param, String fileSuffixUrl) throws Exception{JSONObject json = new JSONObject();json.put("state", "SUCCESS");json.put("url", ueditorcore(param, FILE_PATH, true, fileSuffixUrl));return json;}public String ueditorcore(List<Object> param, String path, boolean isFileName, String fileSuffixUrl)throws Exception{MultipartFile upfile = (MultipartFile) param.get(1);// 上传文件路径String filePath = RuoYiConfig.getUploadPath();String fileName = FileUploadUtils.upload(filePath, upfile);String url = fileSuffixUrl + fileName;return url;}
}

添加后根据自己不同的项目包名将引入包删除后重新引入.
这里多说一句，RequestMapping指引的路径要跟ueditor.config.js中的一致，ueditor.config.js在我们放入的ajax-lib-ueditor中，当然其已经自动获取url了

如果有修改也需要修改此文件。
再提一句，我曾维护一个项目的upload被重写了，重写后的upload返回的值不是String类型

那么我们通过toString转为字符串是行不通的，会导致我们的图片没法回显，并且路径也不对，这时我们需要自己重写一个upload类，然后自定义一个根据文件路径上传

//根据文件路径上传，返回值为Stringpublic static final String upload1(String baseDir, MultipartFile file) throws IOException{try{return upload(baseDir, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);}catch (Exception e){throw new IOException(e.getMessage(), e);}}
//返回值为String
public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension)throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,InvalidExtensionException{int fileNamelength = Objects.requireNonNull(file.getOriginalFilename()).length();if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH){throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);}assertAllowed(file, allowedExtension);String fileName = extractFilename(file);File desc = getAbsoluteFile(baseDir, fileName);file.transferTo(desc);return getPathFileName(baseDir, fileName);}

当然，这upload类所在的路径是(common模块)common-src-main-java-common-utils-file-FileUploadUtils.java文件中

三.测试效果

测试成功

关于ruoyi框架整合ueditor富文本编辑器相关推荐

maven 整合ueditor富文本编辑器
首先去官网下载ueditor编辑器插件然后将中的lib文件夹放到的lib中下面上代码 jsp: 这里写代码片 <%@page import="com.education.pr ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
php引入百度Ueditor富文本编辑器
php引入百度Ueditor富文本编辑器文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...
Ueditor富文本编辑器
Ueditor富文本编辑器 Ueditor富文本编辑器插件应用步骤如下: 1.引入css和js文件 2.设置承载标签设置富文本编辑器的承载标签,必须设置id属性.一般使用textarea或scrip ...
ueditor富文本编辑器过滤了代码，如何取消？
后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...
java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器
spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片依赖库版本: spring boot ...
ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
UEditor富文本编辑器不显示问题
项目场景: vue中if判断后使用文本编辑器(误区) 问题描述: 在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出. <!-- 判断富 ...

关于ruoyi框架整合ueditor富文本编辑器

文章目录