一個百度富文字編輯器的坑

Cheng_枯榮發表於2020-10-27

一個路徑配置問題一天沒有搞出來,找了一個經驗比較豐富的同事問了一下才發現問題所在。
UEditor下載安裝完後首先修改幾個路徑,一個是serverURL,另一個是上傳圖片(視訊或檔案)的上傳地址。
Ueditor.config.js檔案
config.json檔案

一般情況下serverURL的路徑都是直接指向config.json 但是由於在頁面在初始化富文字編輯器時,會傳給初始路徑一個引數action值為config,所以在介面路徑上又做了一步處理:
在這裡插入圖片描述
可是在上傳圖片的時候報錯了
在這裡插入圖片描述
後臺報錯為查不到對應的template:
在這裡插入圖片描述
然後去看請求的URL為
在這裡插入圖片描述
按道理來講在富文字編輯器初始化的時候就已經根據介面路徑查到config.json檔案,然後根據action去訪問相應的路徑才對,可是在上傳圖片的時候再一次請求了介面路徑,就有問題了。
請教了同事才知道少配置了東西:

<script type="text/javascript">
        $(function() {
            //配置富文字檔案上傳
            UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
            UE.Editor.prototype.getActionUrl = function (action) {
                if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
                    return window.location.protocol + "//" + window.location.host + '/(你的上傳路徑)';
                } else {
                    return this._bkGetActionUrl.call(this, action);
                }
            };
        });
    </script>

要在初始化的js裡配置路徑跳轉才可以。

接著又遇到一個問題,上傳成功了但是不回顯圖片:對於上傳路徑訪問的返回狀態碼已經是200,但是依然不回顯樣式,查了一下發現UEditor需要返回固定的引數他才能識別,於是在返回物件中加入:

            result.put("state", "SUCCESS");

成功回顯啦!

相關文章