Cross domain uploading of files with CKEditor Image/Preview/File Upload
Sometimes your web site is located on one server and file content (files for downloading, images) on another. In this case it might be a good decision to separate CKEditor and uploader.
In other words you will use CKEditor + DOKSoft Image (or Preview or File) Upload plugins on one server and upload script on another. Also you will get the uploaded files stored on the same server where uploader script is located on, so all your URLs to images/files linked to external server.
The only problem you will get is browsers security limitations. In this article you will see how to easily configure the plugins to be compatible with current browsers.
- File Uploader
- CKEditor Quick Image Uploader
- CKEditor Quick Image Preview
- CKEditor Quick File Uploader
- CKEditor Easy Image Uploader
- CKEditor Easy Image Preview
- CKEditor Easy File Uploader
- Chrome 6+
- Safari 4+
Skip this chapter if you need just to configure the plugins. But this information can let you understand cross domain mechanism deeper.
Some time ago all browsers had no ability to manage cross domain calls by security reasons and just declines such calls. But due to industry needs all they were upgraded and now allow to make such calls if they are compatible with browser's security restrictions.
When your browser (we hope you are using modern browser) wants to execute AJAX call (DOKSoft plugins upload images exactly via AJAX calls) it adds a HTTP header:
to the request. Then it reads a response and allows it to be read by your script (DOKSoft Image/File Upload plugins in our case) only if the response' headers have a header:
If this reqirements are satisfied you get crossdomain working OK, in other case you get HTTP error.
We will show you how to configure the plugins using the example. We will use two sample web sites:
http://yourwebsite_with_ckeditor.com - the web site where CKEditor is located on.
Full path to CKEditor is:
http://yourwebsite_with_uploader.com - the web site where DOKSoft Uploader will be located on.
We desribe PHP uploader installation case:
Install plugin on
yourwebsite_with_ckeditor.comusing according installation manual on our web site (you do not need to copy
ckeditor/pluginsin case of cross domain uploads.
yourwebsite_with_uploader.com. For example to
Configure location of external upload script editing the file
http://yourwebsite_with_ckeditor.com/path/ckeditor/config.js. Add this line:
config.doksoft_uploader_url = 'http://yourwebsite_with_uploader.com/scripts/doksoft_uploader/uploader.php';
http://yourwebsite_with_uploader.com/scripts/doksoft_uploader/config.phpto set images URL and allow cross domain uploading:
$config['BaseUrl'] = 'http://yourwebsite_with_uploader.com/scripts/doksoft_uploader/userfiles'; $config['AllowExternalWebsites'] = 'http://yourwebsite_with_ckeditor.com'; // you can use '*' value also
That's all! Your CKEditor's DOKSoft image tools must fully work with external files or images uploader.