Amazon S3 File Manager for TinyMCE & CKEditorTinyMCE and CKEditor are WYSIWYG editors and Amazon S3 is a cloud storage. So what can we do with them? The idea is when we need to embed an image, video or other multimedia object into the text, we upload it to a cloud storage and insert a link to this object into the text.
In other words, we need a file manager plug-in for the editor which supports common file operations, namely browsing, creating, and deleting files and folders. After some googling around I found several solutions with such functionality. However, they all work with the server file system only and neither of them can work with cloud storages. For example, they require you to store your media content on the server where your site is located. So if you still want to use a cloud storage (in particular, Amazon S3) for your content, this post may be of interest to you.
The attached archive contains a plug-in for TinyMCE and CKEditor which allows managing files hosted on Amazon S3 storage. And, of course, it uses
Aurigma Image Uploader for uploading files to this storage.
The installation is simple. There are two sample pages in the
examples folder. The first one shows how to use the plug-in with TinyMCE editor and the second page implements the same for CKEditor. In a word, you need to set the
returnTo parameter to a name of the editor you use (
tinemce or
ckeditor). Also you can set a default width and height of file manager window. Amazon S3 account settings are configured via the server-side php script in the following way. Open
AmazonS3FileManager/ajax/php/ajax.php file and set the
$cfg['as3']['bucket'],
$cfg['as3']['key'] and
$cfg['as3']['secret'] options.
After installation, the
Browse button appears next to the
Image URL field on the
Insert Image popup. Click this button to open the Amazon S3 File Manager. It looks like the following screenshot:
There is a folder tree with your Amazon S3 bucket structure on the left. You can create and remove folders by clicking the corresponding buttons on the toolbar. Image Uploader control is the bottom right. Click
Select Files For Upload and add files through a standard open file dialog or drag and drop files from Windows Explorer onto the
Drop files here label. The
Upload button starts uploading of selected files and the
Cancel button aborts it. The list of the uploaded files is on the top right. The
Select button returns a URL to the selected file and closes the file manager window.
That's all, hope will like it. If you have any thoughts about it feel free to post them here.
Edited by moderator Sunday, September 4, 2011 10:03:14 PM(UTC)
| Reason: Not specified
File Attachment(s):
andreym attached the following image(s):