本文用于解決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;
}