JAVA SpringBoot2 整合 ueditor 的 並實現先後端分離

時間  2019-11-06
標籤 java springboot2 springboot 整合 ueditor 實現 後端 分離 欄目 Java 简体版
原文   原文鏈接

1，下載 jsp 版本的 百度編輯器，點擊此處下載html

2，解壓文件，解壓後目錄以下前端

3，咱們將 jsp 目錄暫時移動到別的地方，剩下的文件做爲一個 H5 前端項目使用，筆者這邊導入到 idea 進行開發，導入後以下java

4，建立一個 springboot 項目，引入如下 maven 依賴git

        <!-- WEB 開發 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- 百度文本編輯器後臺部分 -->
        <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>

5，在 application.yml 文件中添加如下配置，主要了端口，上傳文件的保存地址，靜態資源訪問路徑等等web

server:
  port: 80     # 端口

file:
  save:
    location: ${user.dir}/upload-file  # 自定義的文件保存地址
spring:
  mvc:
    static-path-pattern: /**
  resources:
    static-locations: file:///${user.dir}/upload-file  # 設置文件保存地址爲靜態資源路徑，外部得以訪問

6，建立一個 Controller 用以接收上傳的文件 UeditorController spring

package com.my.web.server.controller; 

import com.baidu.ueditor.ActionEnter;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

@RestController
@RequestMapping("ueditor")
public class UeditorController {

    // 讀取配置文件中配置的上傳文件保存地址
    @Value("${file.save.location}")
    private String ueditorUrl;

    /**
     * 接收和獲取百度編輯插件的文件，須要注意如下幾點
     * 1，須要在 ueditorUrl 目錄下建立 ueditor 目錄，將 config.json 拷貝到該路徑下
     * 2，必須將 ueditorUrl 目錄設置爲靜態資源路徑，不然上傳的文件可能沒法訪問
     * 3，注意訪問配置文件的方式 ueditor.config.js 請求的路徑就是 config.json 放置的同級路徑
     */
    @RequestMapping("upload")
    public String upload(HttpServletRequest request, String action) {
        String result = new ActionEnter(request, ueditorUrl).exec();
        ueditorUrl = ueditorUrl.replaceAll("\\\\", "/");
        if (action != null && (action.equals("listfile") || action.equals("listimage"))) {
            return result.replaceAll(ueditorUrl, "");
        }
        return result;
    }

}

 

7，在 springBoot 項目的同級目錄下建立上傳文件的保存文件夾  /upload-file/ueditor/  並將 第 3 步中移走的的 jsp 目錄下的 config.json 拷貝到該目錄下json

8，修改 config.json 以下，主要增長了 資源訪問前綴 ，這裏的圖片訪問前綴就是你 springboot 訪問的 ip 地址，因爲上面配置了 80 端口，因此這裏直接是 http://localhost後端

/* 先後端通訊相關的配置,註釋只容許使用多行方式 */
{
    /* 上傳圖片配置項 */
    "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
    "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
    "imageMaxSize": 2048000, /* 上傳大小限制，單位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
    "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
    "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
    "imageInsertAlign": "none", /* 插入的圖片浮動方式 */
    "imageUrlPrefix": "http://localhost", /* 圖片訪問路徑前綴 */
    "imagePathFormat": "/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
                                /* {filename} 會替換成原文件名,配置這項須要注意中文亂碼問題 */
                                /* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
                                /* {time} 會替換成時間戳 */
                                /* {yyyy} 會替換成四位年份 */
                                /* {yy} 會替換成兩位年份 */
                                /* {mm} 會替換成兩位月份 */
                                /* {dd} 會替換成兩位日期 */
                                /* {hh} 會替換成兩位小時 */
                                /* {ii} 會替換成兩位分鐘 */
                                /* {ss} 會替換成兩位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */

    /* 塗鴉圖片上傳配置項 */
    "scrawlActionName": "uploadscrawl", /* 執行上傳塗鴉的action名稱 */
    "scrawlFieldName": "upfile", /* 提交的圖片表單名稱 */
    "scrawlPathFormat": "/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
    "scrawlMaxSize": 2048000, /* 上傳大小限制，單位B */
    "scrawlUrlPrefix": "http://localhost", /* 圖片訪問路徑前綴 */
    "scrawlInsertAlign": "none",

    /* 截圖工具上傳 */
    "snapscreenActionName": "uploadimage", /* 執行上傳截圖的action名稱 */
    "snapscreenPathFormat": "/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
    "snapscreenUrlPrefix": "http://localhost", /* 圖片訪問路徑前綴 */
    "snapscreenInsertAlign": "none", /* 插入的圖片浮動方式 */

    /* 抓取遠程圖片配置 */
    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage", /* 執行抓取遠程圖片的action名稱 */
    "catcherFieldName": "source", /* 提交的圖片列表表單名稱 */
    "catcherPathFormat": "/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
    "catcherUrlPrefix": "http://localhost", /* 圖片訪問路徑前綴 */
    "catcherMaxSize": 2048000, /* 上傳大小限制，單位B */
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取圖片格式顯示 */

    /* 上傳視頻配置 */
    "videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */
    "videoFieldName": "upfile", /* 提交的視頻表單名稱 */
    "videoPathFormat": "/ueditor/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
    "videoUrlPrefix": "http://localhost", /* 視頻訪問路徑前綴 */
    "videoMaxSize": 102400000, /* 上傳大小限制，單位B，默認100MB */
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上傳視頻格式顯示 */

    /* 上傳文件配置 */
    "fileActionName": "uploadfile", /* controller裏,執行上傳視頻的action名稱 */
    "fileFieldName": "upfile", /* 提交的文件表單名稱 */
    "filePathFormat": "/ueditor/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
    "fileUrlPrefix": "http://localhost", /* 文件訪問路徑前綴 */
    "fileMaxSize": 51200000, /* 上傳大小限制，單位B，默認50MB */
    "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", /* 執行圖片管理的action名稱 */
    "imageManagerListPath": "/ueditor/image/", /* 指定要列出圖片的目錄 */
    "imageManagerListSize": 20, /* 每次列出文件數量 */
    "imageManagerUrlPrefix": "http://localhost", /* 圖片訪問路徑前綴 */
    "imageManagerInsertAlign": "none", /* 插入的圖片浮動方式 */
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件類型 */

    /* 列出指定目錄下的文件 */
    "fileManagerActionName": "listfile", /* 執行文件管理的action名稱 */
    "fileManagerListPath": "/ueditor/file/", /* 指定要列出文件的目錄 */
    "fileManagerUrlPrefix": "http://localhost", /* 文件訪問路徑前綴 */
    "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"
    ] /* 列出的文件類型 */

}

9，添加過濾器，使得項目容許跨域訪問，代碼以下啓動，（注意，直接在 controller 上添加  @CrossOrigin 註解並不能達到效果，建議添加下面的過濾器）跨域

package com.my.web.server.middleware;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 全局過濾器，用於處理一些須要在請求前處理的事物
 */
@Component
public class ServletFilter implements Filter {

    /**
     * 該方法用於初始化過濾器
     */
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    /**
     * 該方法在容器移除 servlet 時執行，一樣只執行一次
     */
    @Override
    public void destroy() {}

    /**
     * 該方法只執行在響應 WEB 請求的最開始
     * 這裏添加了任意域名任意請求方式可跨域訪問的功能
     * Access-Control-Allow-Origin   容許跨域訪問的域名
     * Access-Control-Allow-Headers  容許任何請求頭訪問
     * Access-Control-Allow-Methods  容許跨域訪問的請求方式
     */
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Headers", "*");
        chain.doFilter(req, res);
    }
}

10，啓動 SpringBoot 項目，自此，後端準備完畢，下面咱們修改 前端部分，打開第 3 部導入到 idea 中的項目瀏覽器

11，打開 ueditor.config.js，找到 serverUrl 配置項，修改成 SpringBoot 中 接口的訪問地址 http://localhost/ueditor/upload

12， 而後咱們 訪問 前端項目下的 index.html 文件，就能看見這個界面了

13，測試了一下，基本動能都能實現，包括多圖上傳和管理

14，可是單圖上傳，因爲是爲了兼容 低版本，使用了 表單提交到 iframe 的方式，不支持跨域，沒辦法，這裏咱們只能修改源碼了

15，打開 ueditor.all.js，修改 如下代碼，這個文件很大，咱們可使用 idea 的搜索功能，直接檢索  domUtils.on(input, 'change', function(){  定位到代碼將  回調函數內的內容替換成下面的部分

// ------------------------------代碼修改區開始----------------------------
            domUtils.on(input, 'change', function(){
                if(!input.value) return;
                var loadingId = 'loading_' + (+new Date()).toString(36);
                var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
                var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
                var allowFiles = me.getOpt('imageAllowFiles');
                me.focus();
                me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');
                var filename = input.value,
                    fileext = filename ? filename.substr(filename.lastIndexOf('.')) : '';
                if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {
                    showErrorLoader(me.getLang('simpleupload.exceedTypeError'));
                    return;
                }
                var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
                var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
                var formData = new FormData();
                formData.append("upfile", form[0].files[0]);

                var xhr = new XMLHttpRequest();
                xhr.open("post", action, true);
                xhr.onload = function () {
                    data = eval("(" + xhr.response + ")");
                    var link, loader,
                        body = (iframe.contentDocument || iframe.contentWindow.document).body,
                        result = body.innerText || body.textContent || '';
                    link = me.options.imageUrlPrefix + data.url;

                    if (data.state == 'SUCCESS' && data.url) {
                        loader = me.document.getElementById(loadingId);
                        loader.setAttribute('src', link);
                        loader.setAttribute('_src', link);
                        loader.setAttribute('title', data.title || '');
                        loader.setAttribute('alt', data.original || '');
                        loader.removeAttribute('id');
                        domUtils.removeClasses(loader, 'loadingclass');
                    } else {
                        showErrorLoader && showErrorLoader(data.state);
                    }
                    form.reset();
                }
                xhr.send(formData);

                function showErrorLoader(title){
                    if(loadingId) {
                        var loader = me.document.getElementById(loadingId);
                        loader && domUtils.remove(loader);
                        me.fireEvent('showmessage', {
                            'id': loadingId,
                            'content': title,
                            'type': 'error',
                            'timeout': 4000
                        });
                    }
                }
            });
            var stateTimer;
            me.addListener('selectionchange', function () {
                clearTimeout(stateTimer);
                stateTimer = setTimeout(function() {
                    var state = me.queryCommandState('simpleupload');
                    if (state == -1) {
                        input.disabled = 'disabled';
                    } else {
                        input.disabled = false;
                    }
                }, 400);
            });
        });
        // ------------------------------代碼修改區結束----------------------------

16，這樣咱們就完成了 富文本編輯器的集成了，（注意 修改了 ueditor.all.js 後 index.html 中的文件引用要改爲該文件，原來引用的是 壓縮的 那個 ueditor.all.min.js）

17，一旦 作了 15 步的修改後，瀏覽器若是不支持 FormDate 和 XMLHttpRequest 2.0 的話，將沒法正常運行，不過基本上 除了 低版本的 IE 也不會沒有不支持的瀏覽器了，這時候就要看項目如何取捨了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程