Home > Developer > Web Develop
Before you write the configuration method before you spit out the various tutorials on the Web, TM No one has an egg, a bunch of dumb dick won't write don't write, write will be responsible.
Baidu Google searched for half a day, all is configured what document.domain, root domain What, I just want to say to you:
Okay, talk is cheap show me the code, to the following:
First go to the UE official website to download version 1.43. NET, unzip, the demo folder to the Web, the net that folder to be copied out to the web outside,
This separates the static file of the editor from the dynamic file, and the dynamic part is placed on the file server, and the static part is integrated into our website.
I'll use c.com to bind to the Web directory, d.com bound to the net directory (a, B.Com I used in the test).
Create two sites in local IIS first, set:
Next to set up the hosts to access, this is the impersonated binding domain name, open C:\Windows\System32\drivers\etc find the Hosts file, open with Notepad to add two lines to the end of the file:
127.0.0.1 c.com
127.0.0.1 d.com
After saving in the browser access to the c\d.com can access to the local IIS, if not save the first mail Hosts file to add the user permissions set to modifiable can be saved.
Next open the a.com below the index.html file, the code in it to delete the deletion, the toolbar to reset the reservation to get the upload function:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head> <title>Full Demo</title> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"/> <Scripttype= "Text/javascript"CharSet= "Utf-8"src= "/ueditor.config.js"></Script> <Scripttype= "Text/javascript"CharSet= "Utf-8"src= "/ueditor.all.js"> </Script> <!--It is recommended to manually add the language, to avoid under IE sometimes because the load language failure causes the editor to fail to load - <!--the language file loaded here will overwrite the language type you added in the configuration item, such as the English you configured in the configuration item, the Chinese is loaded here, and the last is Chinese . - <Scripttype= "Text/javascript"CharSet= "Utf-8"src= "/lang/zh-cn/zh-cn.js"></Script></Head><Body><Div> <H1>Cross-Domain uploads</H1> <ScriptID= "Editor"type= "Text/plain"style= "width:1024px;height:500px;"></Script></Div><Scripttype= "Text/javascript"> //Instantiation Editor //We recommend that you use the factory method Geteditor to create and reference the editor instance, and if you refer to the editor under a closure, call Ue.geteditor (' editor ') directly to get the relevant instance varUE=Ue.geteditor ('Editor', {toolbars: [['Source', 'Simpleupload', //Single image upload 'Insertimage', //multi-image upload] 'Attachment', //Accessories 'scrawl', //Graffiti 'Wordimage', //Picture Dump 'Insertvideo'//Upload your video ]] });</Script></Body></HTML>
Final effect:
Next open the c.com below the Ueditor.config.js, find:, Serverurl:url + "Net/controller.ashx" changed to:, ServerURL: "http://d.com /controller.ashx "
Next you open the browser debugging, refresh the page to see the request d.com the following controller.ashx get the upload parameters. "Back Test try to refresh the page test with CTRL+F5, do not try to clear the cache"
Now you can test the upload, the number of times a single file upload can be uploaded successfully, d.com below already have files, but can not return the address, upload and upload multiple files, such as graffiti failure, to error:
XMLHttpRequest cannot load http://d.com/controller.ashx?action=uploadimage&encode=utf-8. Response to preflight request doesn ' t pass access control check:no ' Access-control-allow-origin ' header was present on the Requested resource. Origin ' http://c.com ' is therefore not allowed access.
Here it is necessary to mention that the UE single file upload is a form submitted to the IFRAME, and then detect the contents of the IFRAME to return the results, the official has clearly stated that the single file upload can not achieve cross-domain upload , Because the cross-domain iframe is not getting the HTML code inside the IFRAME, I can't get the upload address now, I have a way to solve it later. and many files upload and doodle These use is flash upload or HTML5 upload, this will use cross-domain method to solve, the next first solve this problem.
Enter the B.Com directory below. Open Config.json, search urlprefix ":"/ueditor/net/", all changed to URLPrefix": "http:/d.com/", this is the image after the successful upload of the address prefix, Let it return to http://d.com/xxxx/xx/jpg.
Then according to the UE official document is to be in the file server controller.ashx inside add header:access-control-allow-origin, etc., according to my test, the eggs have no!! To add a line on IIS, don't ask me why, I don't know.
OK, now to test the multi-image upload, the success of the wood has!! The graffiti can also be saved!
However, the single file upload is still not cross-domain, because he is the way of the IFRAME, to achieve cross-domain also have to go through the trouble.
OK, implement single-file cross-domain uploads. First of all to understand his principle, it is submitted to the IFRAME to upload, and then monitor the IFRAME loading is completed after JS gets the contents of the IFRAME is JSON results to get the image upload results. and cross-domain upload iframe inside the page and the current page is not the same domain name can not get JSON, the official said temporarily does not support, in fact, so easy, with the traditional proxy page to solve, is the file server upload success, do not directly display the results, Instead, jump to the Result.ashx page below c.com to pass the results to this page, then output, so that the IFRAME is on the same domain name.
First add the result.ashx below the c.com:
<%@ WebHandler language="C #"class="Ueditorhandler"%>usingSystem;usingsystem.web;usingSystem.IO;usingSystem.Collections; Public classueditorhandler:ihttphandler{ Public voidProcessRequest (HttpContext context) {varResult=context. request["result"]; //of course, it is better to judge whether the result is safe, do not receive the content to show that it will be exploited. if(result!=NULL) context. Response.Write (Result. ToString ()); } Public BOOLisreusable {Get { return false; } }}
Because only a single image upload is a simple file upload to use the IFrame method so we have to judge, only simple file upload in this way. Open Ueditor.all.js or ueditor.all.min.js on your page to open which, search <input id= "Edui_input_ before </form> add:
<input type= "hidden" name= "Issimpleupload" value= "true"/> so after uploading we are good by obtaining issimpleupload to determine whether it is a simple file upload.
Initialize the Editor page which page you call, plus two.
Then change the d.com processing file, App_Code inside the Handler.cs Open, the 28th line of curly braces inside plus judgment:
if (String.isnullorwhitespace (jsonpcallback)) { var issimple = request["Issimpleupload"]; if (issimple! = null && issimple. ToString () = = "true") { Response.Redirect ("http://c.com/result.ashx?result=" + json); Pass the JSON to the c.com below to render the result. } Response.AddHeader ("content-type""text/plain" ); Response.Write (JSON); }It's done here!!!
UE really easy to use Ah, especially for personal webmaster, Baidu Search, search music, graffiti, paste content directly download remote pictures, the content of the page and other functions for the webmaster tailor-made.
The only regret is that there is no page title for the content paging, but I have expanded the paging title.
Ueditor1.4.3 enables cross-domain upload to standalone file servers, perfect for single-file and multi-file uploads!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
