Spring boot 整合Ueditor(百度编辑器) 简洁版(图片上传)

cocosum

已于 2023-12-20 14:04:07 修改

阅读量943

点赞数

分类专栏： Spring boot 文章标签： Spring boot ueditor UEditor Maven依赖 UEditor文件上传 Springboot 整合UEditor文件上传

于 2019-10-19 15:07:50 首次发布

本文链接：https://blog.csdn.net/qq_40058321/article/details/102638307

版权

Spring boot 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、先给大家拜个早年！看个效果图:

2、去百度官网下载UEditor。机票

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU4MzIx,size_16,color_FFFFFF,t_70

3、下载下来是这样的:

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU4MzIx,size_16,color_FFFFFF,t_70

# config.json 配置文件（需要引用）
# controller.jsp springboot默认不支持jsp的，所以在这里咱也不用。
# ueditor.config.js 这个需要，直接引入页面就行了。一共引入三个就行了

<!-- 容器 -->
<script id="editor" type="text/plain" style="width:100%;"></script>

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

4、上代码（后台一共三个类）:

/**
 * ueditor config.json 配置文件
 * @author : fyk
 * @create : 2019/10/19 13:46
 **/
public class UEditConfig {
    public final static String UEDITOR_CONFIG = "{\n" +
            "    \"imageActionName\": \"uploadimage\",\n" +
            "    \"imageFieldName\": \"upfile\",\n" +
            "    \"imageMaxSize\": 2048000,\n" +
            "    \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
            "    \"imageCompressEnable\": true,\n" +
            "    \"imageCompressBorder\": 1600,\n" +
            "    \"imageInsertAlign\": \"none\",\n" +
            "    \"imageUrlPrefix\": \"\",\n" +
            "    \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "\n" +
            "    \"scrawlActionName\": \"uploadscrawl\",\n" +
            "    \"scrawlFieldName\": \"upfile\",\n" +
            "    \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"scrawlMaxSize\": 2048000,\n" +
            "    \"scrawlUrlPrefix\": \"\",\n" +
            "    \"scrawlInsertAlign\": \"none\",\n" +
            "\n" +
            "    \"snapscreenActionName\": \"uploadimage\",\n" +
            "    \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"snapscreenUrlPrefix\": \"\",\n" +
            "    \"snapscreenInsertAlign\": \"none\",\n" +
            "\n" +
            "    \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
            "    \"catcherActionName\": \"catchimage\",\n" +
            "    \"catcherFieldName\": \"source\",\n" +
            "    \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"catcherUrlPrefix\": \"\",\n" +
            "    \"catcherMaxSize\": 2048000,\n" +
            "    \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
            "\n" +
            "    \"videoActionName\": \"uploadvideo\",\n" +
            "    \"videoFieldName\": \"upfile\",\n" +
            "    \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"videoUrlPrefix\": \"\",\n" +
            "    \"videoMaxSize\": 102400000,\n" +
            "    \"videoAllowFiles\": [\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"],\n" +
            "\n" +
            "    \"fileActionName\": \"uploadfile\",\n" +
            "    \"fileFieldName\": \"upfile\",\n" +
            "    \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "    \"fileUrlPrefix\": \"\",\n" +
            "    \"fileMaxSize\": 51200000,\n" +
            "    \"fileAllowFiles\": [\n" +
            "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
            "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
            "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
            "    ],\n" +
            "\n" +
            "    \"imageManagerActionName\": \"listimage\",\n" +
            "    \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
            "    \"imageManagerListSize\": 20,\n" +
            "    \"imageManagerUrlPrefix\": \"\",\n" +
            "    \"imageManagerInsertAlign\": \"none\",\n" +
            "    \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
            "\n" +
            "    \"fileManagerActionName\": \"listfile\",\n" +
            "    \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
            "    \"fileManagerUrlPrefix\": \"\",\n" +
            "    \"fileManagerListSize\": 20,\n" +
            "    \"fileManagerAllowFiles\": [\n" +
            "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
            "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
            "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
            "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
            "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
            "    ] \n" +
            "\n" +
            "}";
}

/**
 * 返回状态
 * @author : fyk
 * @create : 2019/10/19 9:51
 **/
@SuppressWarnings("all")
@Data
public class Ueditor {

    public static final String SUCCESS = "SUCCESS";// 成功
    public static final String ERROR = "ERROR";    // 失败

    /**  状态  SUCCESS/ERROR **/
    private  String state;
    /**  图片回显的地址 **/
    private  String url;
    /**  title提示 **/
    private  String title;
    /**  上传前的图片名 **/
    private  String original;
}

import com.smoke.commons.utils.Commons;
import com.smoke.commons.utils.UploadUtils;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.*;

/**
 * editor 自定义上传控制层
 * @author : fyk
 * @create : 2019/10/19 9:55
 **/
@RestController
@RequestMapping(value = "/ueditUploadController")
public class UeditController {

    // 拿到配置文件配置的路径(文件服务器的路径)
    @Value("${upload.url}")
    private String fileServerUrl;

    /**
     * 获取config.json配置文件
     * @author : fyk
     * @create : 2019/10/19 14:09
     **/
    @RequestMapping(value="/config")
    public String index() {
        return UEditConfig.UEDITOR_CONFIG;
    }

    /**
     * 自定义文件上传方法
     * @author : fyk
     * @create : 2019/10/19 14:09
     **/
    @RequestMapping(value = "/upload")
    public Map<String, Object> upload(@RequestParam(value = "upfile", required = false) MultipartFile pic,
                                     String type, HttpServletResponse response) throws IOException {
        // 返回对象，需要json格式
        Ueditor ueditor = new Ueditor();
        // 文件保存路径前缀(smoke-是我这个项目的名称: 可忽略)
        String saveUrl = fileServerUrl + "smoke";
        if (StringUtils.isNotBlank(type)) {
            if (type.startsWith("imgs")) {
                saveUrl += "/imgs/";
            }else if (type.startsWith("videos")) {
                saveUrl += "/videos/";
            }else{
                saveUrl += "/files/";
            }
        } else {
            saveUrl += "/";
        }
        try {
            // 获取文件名
            String fileName = pic.getOriginalFilename();
            // 保存上传时的文件名(暂时)
            String oldName = fileName;
            // 获取文件的后缀suffix
            String fileSuffix = fileName.substring(fileName.indexOf(".") + 1);
            // 我用UUID作文件名: 防止重复、防止乱码
            fileName = Commons.getUUID() + "." + fileSuffix;
            // 推送到服务器(怎么推送, 看我另一篇博客, 下面是链接)
            // https://blog.csdn.net/qq_40058321/article/details/97277552
            String returnPath = UploadUtils.uploadFile(pic.getBytes(), saveUrl, fileName);
            ueditor.setState(Ueditor.SUCCESS);
            ueditor.setTitle(oldName);
            // 上传之后回显的路径，我这里是文件服务器返回的图片路径
            ueditor.setUrl(returnPath);
            ueditor.setOriginal(pic.getName());
        } catch (Exception e) {
            ueditor.setState(Ueditor.ERROR);
            e.printStackTrace();
        }
        response.getWriter().print(JSONObject.toJSON(ueditor));
        return null;
    }
}

5、上Maven依赖:

<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>
<dependency>
    <groupId>cn.songxinqiang</groupId>
    <artifactId>com.baidu.ueditor</artifactId>
    <version>1.1.2-offical</version>
</dependency>
<!-- 还有一个json包 我用的是 -->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20180813</version>
</dependency>

7、js初始化百度编辑器:

// 自定义上传路径
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
// 对应的是后台upload那个方法
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'listimage') {
        return '/ueditUploadController/upload?type=imgs';
    } if (action == 'uploadvideo'){
        return '/ueditUploadController/upload?type=videos';
    } if (action == 'uploadfile'){
        return '/ueditUploadController/upload?type=files';
    } else {
    return this._bkGetActionUrl.call(this, action);
    }
}
// 实例化编辑器
// 建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器
// 直接调用UE.getEditor('editor')就能拿到相关的实例
// 官方文档地址: http://fex.baidu.com/ueditor/
var ue = UE.getEditor('editor');

6、当然最后还有最重要的一步，加载后台配置（修改服务器同一请求接口路径- ueditor.config.js）:

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU4MzIx,size_16,color_FFFFFF,t_70

一定要修改，否则无法加载后台配置！
其实config.js、controller.jsp，不需要做任何修改！

看了不少别人的博客，他们的博客地址我就不一一贴在这里了，有些写的很繁琐，简单点！
①下载 ②创建三个类 ③修改一个接口路径 ④页面引入、以及js初始化编辑器

cocosum

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
Spring boot 整合Ueditor(百度编辑器) 简洁版(图片上传)

1、先给大家拜个早年！看个效果图:2、去百度官网下载UEditor。机票3、下载下来是这样的:# config.json 配置文件（需要引用）# controller.jsp springboot默认不支持jsp的，所以在这里咱也不用。# ueditor.config.js 这个需要，直接引入页面就行了。一共引入三个就行了<!--...
复制链接

扫一扫