Kindeditor is being used in the project, version number 4.1.10
A lot of company Pictures will go CDN, need a separate picture upload service such as: (upload.268xue.com)
Kindeditor simple internal process for uploading images:
the upload button is submitted to the IFRAME. Generate 1 form and one iframe,form commit to (arget) IFRAME
The OnLoad method of the IFRAME gets the returned value. Then call configure callback method Afterupload/aftererror.
Detailed implementation: (in a.com selected image, upload with upload.268xue.com, return the results of the upload to a.com. My project Springmvc):
cross-domain use need to change 2 places:1. The return mode after uploading, 2 callback page processing.
1.upload.268xue.com method of uploading:
@RequestMapping (value = "/upload", method = requestmethod.post) public String upload (httpservletrequest request, Httpse Rvletresponse response) {try {String referer = Request.getheader ("Referer"); Pattern p = pattern.compile ("([a-z]*:(//[^/?#]+)?", pattern.case_insensitive); Matcher mathcer = P.matcher (referer); if (Mathcer.find ()) {String Callbackpath = Mathcer.group ();//Request Source A.com Multiparthttpservle Trequest multipartrequest = (multiparthttpservletrequest) request; Multipartfile imgfile = Multipartrequest.getfile ("FileUpload");//k4 fileupload json = own processing//jsonobject Ile//Json.tostring () can be returned directly to the same domain without redirectString url = "Redirect:" + Callbackpath + "/kindeditor/plugins/image/redirect.html?s=" + json.tostring () + "#" + JSON . toString ();Logger.info (String.Format ("Upload success url:%s", url)); return URL; } else {logger.info ("Upload referer not find"); }} catch (Exception e) {logger.error ("Upload error", e); } return null; }
Upload your own implementation. The point is to return the results of my printout:
Upload Success url:http://a.com/kindeditor/plugins/image/redirect.html?s={"error": 0, "url": "Http://upload.268xue.com/upload/sns/temp/20140510/1399706737140139370.jpg"}#{"error": 0, " URL ":" Http://upload.268xue.com/upload/sns/temp/20140510/1399706737140139370.jpg "}
REDIRECT has a number of references S and # are repeated, very low, used in the a.com. Expected to change.
initialization of the editor in 2.a.com:
var Uploadbutton = Kindeditor.uploadbutton ({button:kindeditor ("FileUpload") [0],fieldname: "FileUpload", url: "http:/ /upload.268xue.com/upload ", afterupload:function (data) {if (Data.error = = 0) { //data.url processing} else {alert (" error ");} },aftererror:function (str) {//alert (' ERROR: ' + str);}}); Uploadbutton.fileBox.change (function (e) {uploadbutton.submit ();});
Button:fileupload. There's no special place.
3.a.com content in kindeditor\plugins\image\redirect.html:
]*) "," IG "); Return ((Uri.match (re))?
(Uri.match (re) [0].substr (Val.length + 1)): null); } var upload_callback = function () {var data=getparameter ("s"); var Location_hash=location.hash; IE6 not get hash??
? Take it that way? Use URL to pass the number of S if (Location_hash!=null && location_hash!= "" && location_hash) {var data = Locati On.hash? Location.hash.substring (1): "; document.getElementsByTagName ("Body") [0].innerhtml = ' <pre> ' + data + ' </pre> '; }else{var data=getparameter ("s"); document.getElementsByTagName ("Body") [0].innerhtml = ' <pre> ' + data + ' </pre> '; } }; </script>
above IE6,7,8,9,ten, Firefox, Chrome test pass. Apple browser Safari test failed.
===========================================================Safari Down Reason: request redirect.html after the onload call processing of the IFRAME is converted to JSON wrong:
such as: Http://a.com/kindeditor/plugins/image/redirect.html?s=%7b%22error%22:0,%22url%22:%22/upload/demo_web/temp/20140510/1399698690364609649.jpg%22%7d#%7b%22error%22:0, %22url%22:%22/upload/demo_web/temp/20140510/1399698690364609649.jpg%22%7d
Processed result: An error occurred while%7b%22error%22:0,%22url%22:%22/upload/demo_web/temp/20140510/1399698690364609649.jpg%22%7d was converted to JSON. The format should be: {"error": 0, "url": "/upload/demo_web/temp/20140510/1399698690364609649.jpg"} for example, str to Json:k.json (str). (Kindeditor-all.js 4196-4206 lines)
Should be the request has the problem, temporarily resolves, changes the kindeditor-all.js (when the error then tries the next transcoding)
their own treatment, low-level places to learn more.
Kindeditor4 cross-domain upload image resolution