Spring boot 整合Ueditor(百度編輯器) 簡潔版(圖片上傳)

1、先給大家拜個早年！ 看個效果圖: 

 2、去百度官網下載UEditor。機票

3、下載下來是這樣的:  

 

# 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）:

 一定要修改，否則無法加載後臺配置！
其實config.js、controller.jsp，不需要做任何修改！

看了不少別人的博客，他們的博客地址我就不一一貼在這裏了，有些寫的很繁瑣，簡單點！
①下載   ②創建三個類   ③修改一個接口路徑  ④頁面引入、以及js初始化編輯器