Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Amazon S3 File Manager for TinyMCE & CKEditor

Options
Go to last post Go to first unread
Previous Topic Next Topic
andreym  
#1 Posted : Sunday, March 14, 2010 10:38:53 PM(UTC)
andreym

Rank: Advanced Member

Groups: Member
Joined: 6/16/2009(UTC)
Posts: 134

Was thanked: 8 time(s) in 8 post(s)
Amazon S3 File Manager for TinyMCE & CKEditor

TinyMCE 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:
UserPostedImage

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):
AmazonS3FileManager.zip (3,918kb) downloaded 6,151 time(s).
andreym attached the following image(s):
AmazonS3FileManager.jpg
Back to top
thanks 1 user thanked andreym for this useful post.
alejandro.dewak on 1/3/2013(UTC)
nm  
#2 Posted : Thursday, October 28, 2010 4:07:26 PM(UTC)
nm

Rank: Newbie

Groups: Member
Joined: 10/28/2010(UTC)
Posts: 1
Hi there.
Is there any way that we can use it in drupal ?
Back to top
Dmitry  
#3 Posted : Friday, October 29, 2010 4:44:21 PM(UTC)
Dmitry

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 8/3/2003(UTC)
Posts: 1,070

Thanks: 1 times
Was thanked: 12 time(s) in 12 post(s)
Hello,

We have plug-ins for Drupal with multiple file upload functionality, but unfortunately do not have ready-to-use file manager for this platform.

Edited by user Friday, October 29, 2010 4:44:51 PM(UTC)  | Reason: Not specified

Sincerely yours,
Dmitry Sevostyanov

UserPostedImage Follow Aurigma on Twitter!
Back to top
PhotosNickel  
#4 Posted : Friday, January 14, 2011 10:03:56 AM(UTC)
PhotosNickel

Rank: Member

Groups: Member
Joined: 12/7/2010(UTC)
Posts: 12

Thanks: 3 times
That plugin seems great !!

Would it bee possible to make it work whit the VirtueMart photo uploader? It would be great if my clients could upload there photos directly on a Amazon cloud storage !

Benoit
Benoit Archambault
PhotosNickel.com
Back to top
Dmitry.Obukhov  
#5 Posted : Monday, January 17, 2011 3:30:48 AM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
Hello Benoit,

Unfortunately, it is not possible to upload files to Amazon S3 using Photo Order component for VirtueMart.
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
Back to top
carteriii  
#6 Posted : Tuesday, April 26, 2011 1:28:04 PM(UTC)
carteriii

Rank: Newbie

Groups: Member
Joined: 4/26/2011(UTC)
Posts: 2
Wow. I've searched the web for any file manager that integrates to CKEditor or TinyMCE and yours is the only one that seems to exist anywhere. I'm really surprised the community hasn't built more, but that's great for you.

I have been able to get your example running standalone by modifying the ajax.php file with my Amazon S3 information, but there is more to do for me to really use this. I am using Drupal's CKEditor module (http://drupal.org/project/ckeditor) to enable CKEditor to be used anywhere within Drupal. It seems that I should be able to just create another Drupal module that integrates your AmazonS3FileManager. With just a few lines of code, it seems that your AmazonS3FileManager could be used on every page of Drupal with CKEditor since the CKEditor module takes care of the rest.

I see in your AmazonS3FileManager.init() that it takes the ID of the text field. It seems that expanding that just a bit with a jquery selector could generically identify any CKEditor field on the page.

Unfortunately I'm struggling to figure out how to do that. Perhaps you could take a look at the CKEditor Module of Drupal? It appears that the key function is ckeditor_process_textarea() within ckeditor.module, but it may not be necessary to even look at their code. Simply using Firebug to determine how to identify the text area may be all that is necessary. For example, I see that a span is created <span class="cke_wrapper">. Perhaps you could just apply your AmazonS3FileManager to anything identified by that class?
Back to top
Dmitry.Obukhov  
#7 Posted : Wednesday, April 27, 2011 8:56:56 PM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
Hello,

Unfortunately, we do not have the similar plug-in for Drupal now. And, I am not able to make any changes in source codes to set it for Drupal.

We consider the implementation of it in the future.
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
Back to top
carteriii  
#8 Posted : Thursday, April 28, 2011 6:26:28 AM(UTC)
carteriii

Rank: Newbie

Groups: Member
Joined: 4/26/2011(UTC)
Posts: 2
I don't think you'd have to make any source code changes to your file manager, to Drupal, to CKEditor, or to Drupal's CKEditor module. I really think it could be another module for Drupal. Based on what I've seen, I think this extra module could simply add javascript to the page which finds the CKEditor text area and calls AmazonS3FileManager.init() on it.

Do you think that's all that would be necessary? Using javascript to find a CKEditor area and then calling AmazonS3FileManager.init()?

Perhaps I am simply not seeing other changes you made to CKEditor. I just saw the javascript call to AmazonS3FileManager.init() and thought that might be all that was necessary to integrate your file manager with any CKEditor installation.
Back to top
Dmitry.Obukhov  
#9 Posted : Tuesday, May 3, 2011 3:41:32 AM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
Hello,

Probably, you can use this existing module for Drupal: http://drupal.org/project/imce
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
Back to top
Copious  
#10 Posted : Thursday, May 12, 2011 1:35:08 PM(UTC)
Copious

Rank: Newbie

Groups: Member
Joined: 5/12/2011(UTC)
Posts: 1
Hello there—

Thanks a ton for authoring this plugin; it's the only one I've found that seems to allow for uploading to S3 within TinyMCE, which surprises me, but I'm still very happy to have been able to track this down.

I've been able to get this hooked up correctly to TinyMCE and I'm able to browse the contents of my S3 bucket, but I've found that when trying to insert an image from S3 by checking its box and clicking the "Select" button, I get a javascript error:
"Function is not available or does not exist: tinyMCE
window.top.opener[$cfg.returnTo] is not a function"

Any thoughts on how to fix this issue?

Edited by user Thursday, May 12, 2011 1:48:05 PM(UTC)  | Reason: Not specified
Back to top
Dmitry.Obukhov  
#11 Posted : Monday, May 16, 2011 12:55:34 AM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
Hello Evan,

Sorry for the delay.

Could you please provide me with a link to your site where you experience this problem so that we will be able to check it in our testing lab?
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
Back to top
oldhand  
#12 Posted : Tuesday, August 14, 2012 5:10:25 AM(UTC)
oldhand

Rank: Newbie

Groups: Member
Joined: 8/14/2012(UTC)
Posts: 2
Hi,

There seems to be an issue when we try to use a bucket in europe:


Fatal error: SOAP Fault: (faultcode: soapenv:Client.TemporaryRedirect, faultstring: Please re-send this request to the specified temporary endpoint. Continue to use the original request endpoint for future requests.) in /xxx/xxxxxx/xxxxxx/AmazonS3FileManager/AmazonS3FileManager/ajax/php/AmazonS3Manager.php on line 256


Can you suggest how this could be fixed..

Many Thanks,


Darryl
Back to top
Dmitry.Obukhov  
#13 Posted : Tuesday, August 14, 2012 10:55:57 PM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
Most probably, you experience this problem because you have SOAP extension disabled. You should enable it. Please read the additional information on how to install it in PHP manual.
To check the status SOAP, please add these lines in your code and look through the page:
Code:
<?php
echo (phpinfo());
?>

If SOAP extension is enabled, you will see:
Code:

SOAP
Soap Client enabled
Soap Server enabled

Otherwise, you will need to enable it.

P.S. this component is obsolete and out of support.

Edited by user Tuesday, August 14, 2012 10:56:46 PM(UTC)  | Reason: Not specified

Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
Back to top
oldhand  
#14 Posted : Wednesday, August 15, 2012 1:42:59 AM(UTC)
oldhand

Rank: Newbie

Groups: Member
Joined: 8/14/2012(UTC)
Posts: 2
Hi,

I did have SOAP enabled, and after some investigation I found the problem was due to some DNS redirection Amazon have in place (http://docs.amazonwebservices.c...atest/dev/Redirects.html)

This means you have to determine the endpoint and pass that with SOAPClient. The problem being this endpoint can change so you must try to make a call, get the SOAP fault response (which contains the temporary endpoint) and use that.

Thanks..
Back to top
Narender  
#15 Posted : Thursday, February 7, 2013 12:21:49 AM(UTC)
Narender

Rank: Newbie

Groups: Member
Joined: 2/1/2013(UTC)
Posts: 1
Hi,

i am using 'Amazon S3 File Manager for TinyMCE & CKEditor' and getting a problem during the file upload .It showing the message "The evaluation period has expired .If you see this message contact site administrator" .It means this edition contains the expired licence key.So my problem is ,how get ride of this issue?


Thanks,
Narender

Edited by user Thursday, February 7, 2013 12:47:26 AM(UTC)  | Reason: Not specified

Narender attached the following image(s):
Error_message.png
Back to top
vitaly  
#16 Posted : Thursday, February 7, 2013 9:45:14 PM(UTC)
vitaly

Rank: Advanced Member

Groups: Member
Joined: 12/19/2012(UTC)
Posts: 164

Was thanked: 8 time(s) in 8 post(s)
Hello Narender,

You should buy the Upload Suite license (https://aurigma.com/Products/ImageUploader/Buy.aspx). In this case you will not have the issue.

Note. Amazon S3 File Manager for TinyMCE & CKEditor oficially does not supported.

Best regards,
Vitaly Kustov
Aurigma Technical Support
Best regards,
Vitaly Kustov
Aurigma Technical Support
Back to top
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF.NET 2.2.3 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.551 seconds.