(2020最新版)SpringBoot+Ueditor+themleaf+fastDFS问题记录及处理

前言:之前做了很多富文本编辑器的工作,不过都是以前了,最近项目突然要加富文本编辑器。心想那就加嘛,没想到springboot整合ueditor这么多坑,一个一个淌过来足足用了整整一天时间。趁着记忆力还算充足赶紧记录一下。一、ueditor引入SpringBoot首先请准备进入这个浑水的请务必注意,百度富文本编辑器已经4年没有更新过了。如果不是项目必须要用,你完全可以选择市面上仍在维护的编辑器。那么开始正常的引入流程:(1)官网下载适合的版本,这里我选择的是JSP版本下载后解压缩,是一个如此结构的目
摘要由CSDN通过智能技术生成

前言:之前做了很多富文本编辑器的工作,不过都是以前了,最近项目突然要加富文本编辑器。心想那就加嘛,没想到springboot整合ueditor这么多坑,一个一个淌过来足足用了整整一天时间。趁着记忆力还算充足赶紧记录一下。

一、ueditor引入SpringBoot
首先请准备进入这个浑水的请务必注意,百度富文本编辑器已经4年没有更新过了。如果不是项目必须要用,你完全可以选择市面上仍在维护的编辑器。
那么开始正常的引入流程:
(1)官网下载适合的版本,这里我选择的是JSP版本在这里插入图片描述
下载后解压缩,是一个如此结构的目录
在这里插入图片描述

我们将这部分代码直接复制到项目中的静态文件目录下,我这里的目录是这样的
在这里插入图片描述

导入maven依赖及相关的文件引入
ueditor的jar包存放在jsp/lib目录下,自己maven进去即可
在这里插入图片描述
相关的maven依赖:(这里ueditor和json包我没在中央仓库下载,而是手动cmd mvn引入的,所以实际依赖可能会和我的不一样,请自行选择,效果是一样的)

        <!-- 引入富文本编辑器依赖 -->
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.10</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
         <dependency>
            <groupId>com.baidu</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>1.0</version>
        </dependency>

在相关页面用themleaf引入对应的JS

    <script th:src="@{/ueditor/ueditor.config.js}"></script>
    <script th:src="@{/ueditor/ueditor.all.min.js}"></script>
    <script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>

这里请务必注意引入顺序,config.js必须在all.min.js上面,让ueditor先加载相关配置项,不然会JS报错,富文本编辑器初始化失败。
(3)在页面初始化富文本编辑器
html:
在这里插入图片描述
JS:

//初始化富文本编辑器
var ue = UE.getEditor("editor");

至此,项目引入富文本编辑器第一步就完成了。
打开对应的页面,出现如图
在这里插入图片描述
二、ueditor的图片、附件、视频等相关的配置与结合fastDFS
完成了上面步骤后,富文本编辑器自己已经可以运转了,但附件上传功能还是坏的。
会提示后端配置不正确,上传插件不能使用。
这里ueditor会读取ueditor.config.js中的配置
在这里插入图片描述
而JSP中只是个跳转,最终找到的是config.json,这里面是全部富文本编辑器上传所需要的配置项
在这里插入图片描述
但是这里有两个问题,
一个是config.json在这个目录下是读取不到的,为此我们需要把它移动到statics目录下,
第二个是config.json读取加载完毕后会走ueditor内置的BinaryUploader文件上传。
这里由于springboot默认配置原因,springboot与BinaryUploader内置的方法冲突,所以用它自带的上传方法是拿不到文件流的,会不停的报未找到上传数据的错误。

三、ueditor重写,并整合进fastDFS

于是为了拿到上传数据,以及整合fastDFS,我们需要重写这部分代码。
首先干掉controller.jsp和config.json,这里我们完全不需要ueditor内置的上传方法了,
新建一个ueditor的controller



import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;




/**
 * @author deer_boom
 * @version 1.0
 * @date 2020年7月27日
 */
@RequestMapping("ueditor")
@RestController
public class UEditorController {
   

    @RequestMapping("/Config")
    public String uploadConfig() {
   
        String s = "/* 前后端通信相关的配置,注释只允许使用多行方式 */\n" +
                "{\n" +
                "    /* 上传图片配置项 */\
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Spring Boot和ueditor1.4.33的附件上传至本地的步骤如下: 1. 添加ueditor1.4.33的jar包依赖,在pom.xml中添加以下代码: ```xml <dependency> <groupId>com.baidu.ueditor</groupId> <artifactId>ueditor</artifactId> <version>1.4.3</version> </dependency> ``` 2. 配置ueditor,在resources目录下创建config.json文件,添加以下代码: ```json { "imageActionName": "uploadimage", "imageFieldName": "upfile", "imageMaxSize": 2048000, "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageCompressEnable": true, "imageCompressBorder": 1600, "imageInsertAlign": "none", "imageUrlPrefix": "", "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlMaxSize": 2048000, "scrawlUrlPrefix": "", "scrawlInsertAlign": "none", "snapscreenActionName": "uploadimage", "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "snapscreenUrlPrefix": "", "snapscreenInsertAlign": "none", "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "catcherUrlPrefix": "", "catcherMaxSize": 2048000, "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "videoActionName": "uploadvideo", "videoFieldName": "upfile", "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", "videoUrlPrefix": "", "videoMaxSize": 102400000, "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid" ], "fileActionName": "uploadfile", "fileFieldName": "upfile", "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", "fileUrlPrefix": "", "fileMaxSize": 51200000, "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], "imageManagerActionName": "listimage", "imageManagerListPath": "/ueditor/jsp/upload/image/", "imageManagerListSize": 20, "imageManagerUrlPrefix": "", "imageManagerInsertAlign": "none", "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "fileManagerActionName": "listfile", "fileManagerListPath": "/ueditor/jsp/upload/file/", "fileManagerUrlPrefix": "", "fileManagerListSize": 20, "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] } ``` 3. 在Controller中添加上传附件的方法,例如: ```java @Controller @RequestMapping("/file") public class FileController { @PostMapping("/upload") @ResponseBody public Map<String, Object> uploadFile(HttpServletRequest request, HttpServletResponse response) { // 获取配置文件路径 String rootPath = request.getSession().getServletContext().getRealPath("/"); String configPath = rootPath + "config.json"; // 创建配置对象 ConfigManager configManager = ConfigManager.getInstance(rootPath, "http://localhost:8080/ueditor/jsp"); try { // 初始化配置 configManager.initEnv(configPath); } catch (Exception e) { e.printStackTrace(); return null; } // 创建上传对象 UEditorUploader uploader = new BinaryUploader(configManager, request, response); // 执行上传 Map<String, Object> result = uploader.doExec(); return result; } } ``` 4. 在前端页面中使用ueditor上传附件,例如: ```html <!-- 加载ueditor --> <script type="text/javascript" src="/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="/ueditor/ueditor.all.js"></script> <!-- 创建ueditor实例 --> <script type="text/javascript"> var ue = UE.getEditor('editor'); </script> <!-- 创建上传按钮 --> <div class="btn btn-primary" onclick="chooseFile()">上传文件</div> <!-- 上传文件 --> <script type="text/javascript"> function chooseFile() { // 创建表单对象 var formData = new FormData(); // 获取文件对象 var file = document.getElementById("file").files[0]; // 添加文件到表单中 formData.append("upfile", file); // 发送ajax请求 $.ajax({ url: "/file/upload", type: "POST", data: formData, cache: false, contentType: false, processData: false, success: function (result) { if (result.state === "SUCCESS") { // 上传成功,将附件地址添加到ueditor中 ue.execCommand('insertHtml', '<a href="' + result.url + '">' + result.title + '</a>'); } else { alert("上传失败"); } } }); } </script> ``` 以上就是实现Spring Boot和ueditor1.4.33的附件上传至本地的完整步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值