kindeditor 跨域上傳圖片配置 富文本編輯

本文用于解決kindeditor跨域上傳配置,服務(wù)端上傳接口使用java。
kindeditor 調(diào)用服務(wù)端上傳接口需要返回如下json數(shù)據(jù)

//成功時(shí)
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失敗時(shí)
{
        "error" : 1,
        "message" : "錯(cuò)誤信息"
}

一、先創(chuàng)建一個(gè)redirect.html,放于kindeditor項(xiàng)目目錄下

這個(gè)文件用于解決跨域,跟使用富文本編輯的頁面放入同項(xiàng)目

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ie </title>
    <script type="text/javascript">
    function getParameter(val) {
        var uri = decodeURI(window.location.search);
        var re = new RegExp("" + val + "=([^&?]*)", "ig");
        return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
    }

        var upload_callback = function() {
            var error = getParameter("error");
            error = parseInt(error)
            var dataObject;
            if(error==0){
                var url = getParameter("url");
                dataObject = {"error": error, "url": url};
            }else{
                var message = getParameter("message");
                dataObject = {"error": error, "message": message};
            }
            var data =  JSON.stringify(dataObject)
            document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data + '</pre>';
        }
    </script>
</head>
<body onload="upload_callback();">
</body>
</html>

二、頁面調(diào)用kindeditor代碼部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form1" runat="server">
    <script charset="utf-8" src="../node_modules/kindeditor/kindeditor-all.js"
            type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
var callBackPath = 'xxx/redirect.html';//redirect.html的請(qǐng)求路徑 例如 http://www.abc.com/redirect.html
KindEditor.ready(function(K) {
            editor = K.create('#txtContent', {
                filePostName: 'file',//跟服務(wù)端參數(shù)對(duì)應(yīng)
                allowFileManager: true,
                uploadJson: 'XXX/common/kindEditorUpload?callBackPath='+callBackPath,
                items : [ 'source', 'image']
            });
        });

    </script>
    <textarea cols="60" id="txtContent" style="width: 600px; height: 300px;" runat="server"
              readonly="readonly"></textarea>
</form>
</body>
</html>

三、 服務(wù)端接口代碼( java 上傳部分為偽代碼)

@RequestMapping(value = "/common/kindEditorUpload", method = RequestMethod.POST)
    public String uploadKindEditor( @RequestParam String callBackPath, 
                            @RequestBody MultipartFile file){
                //filePath為絕對(duì)路徑
        String filePath = FileUtils.upload(file);
        String url = "";
        try {
            // 同域時(shí)直接返回json,跨域需redirect
            url = "redirect:" + callBackPath + "?error=0&url="filePath;
        } catch (Exception e) {
            e.printStackTrace();
            url = "redirect:" + callBackPath + "?error=1&message="+"錯(cuò)誤信息";
        }
        return url;
    }

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容