ColdFusion File Manager for TinyMCE 4

Thursday 08 May 2014 09:22 PM

This is the updated version of my previous ColdFusion file manager application for TinyMCE 3. This let users browse through a folder in the server, select images, documents, files, media and insert them into the editing document. Users can also upload new files, create folders. FileManager automatically create thumbnails of two different sizes if the user uploads a large image, making it easier to add thumbnail images to documents without resizing upfront.

Set up:
This is quite simple. First setup your TinyMCE 4. Copy “filemanager” into plugin folder.
Call the plugin in TinyMCE, add the “filemanager” button to the toolbar, as you would do with any other TinyMCE plugin. I have included a sample editor configuration page in the download zip file.
Go into plugins/filemanager folder and open up settings.cfm. FileManager want to know the location of your file storage. Provide the full path to that foder.
For example: c:\interpub\wwwroot\mysite.com\MyImages
Also it need the URL to that location, that would be something like http://www.mysite.com\MyImages

If you want to use this in a multi-user environment, you can change the location path programmatically. For example c:\interpub\wwwroot\mysite.com\MyImage\#UserID#

FileManager uses jQuery. I have included jQuery CDN into filemanager/index.cfm page. If you do not wish to use jQuery CDN, add your own jQuery file into this file.

Really Really Important.
Add user authentication to following pages:
- filemanager/index.cfm
- filemanager/upload.cfm
- filemanager/filemanager.cfc
If not, anyone would be able to access these pages and delete pretty much everything. We don’t want that happening.

Demo
Git
Download (filemanager4.zip)
Posted by Saman W Jayasekara at Saturday 05 October 2013 09:19 AM . JavaScript . ColdFusion
You May Also Like :
62 Comments :
Gilbert
Thursday 22 October 2015 07:24 AM
Hi Saman and all,
first thanks a lot for your great plugin. Absolutely marvelous.
If anyone of you gets the same problem as me here is a good trick.

I had the problem that all the img src and href links were getting to a relative path like '../userFiles/' and the solution were the settings of TinyMCE:

relative_urls: false,
remove_script_host : false,
document_base_url : "http://yoursite.com",

Now all the inserted images and links are absolute.

regards

Gilbert
Jörgen Aström
Sunday 11 October 2015 05:01 AM
Can this nice filemanager be used stand alone without TinyMce?
Also, how can I delete a folder?

Kind Regards
Jörgen
Bob
Tuesday 22 September 2015 05:08 AM
Great file manager ... it worked perfectly in my other most recent application. Now I am adding it to our oldest application which is a bit cranky and I am having a couple of problems.

I can get it to show the dynamic file area and insert images in my text area ... trouble is I don't have a scroll bar on the file display to see all the files in my folder. Is there a setting I need to change to get a scroll bar?

Also when I try to do a file upload, I can select a file from my file system and can get as far as clicking the upload button. However then the page just sits there doing nothing with just the rolling blits like it is doing something coming off the side of the button but nothing happens. Is there something it is looking for and not finding??
Dino
Tuesday 09 June 2015 06:38 PM
Is there a way to make the images inserted via the file manager responsive?
Jonathan
Wednesday 27 May 2015 03:04 PM
I just installed the plugin...everything seems to work fine until I try and upload an image. The thumbnail is has a 'broken image' icon. When I inspect the link its looking for the right path I set in the settings.cfm file, but its looking for a 'thumb' folder. So then I browse to my 'userfiles' folder and not only is it empty, but there is no 'thumb' folder. This is being run on CF 11 and Windows. Any help you can provide would be appreciated.
Greg
Friday 24 October 2014 11:50 AM
Hello, I tried to implement your plugin. I have follow the configurations steps. The Filemanager button appear on my editor. But, when I click on it, it displays the Popin, but the iframe html content of index.cfm is not decoded. Th content is between <pre> tags, and displays me the html code in the Popin.

Any idea ?
Sam
Tuesday 18 November 2014 09:35 PM
Just a stupid question. are you running this on a ColdFusion server?
akos
Tuesday 21 October 2014 05:26 AM
hi there, I've managed to install filemanager successfully and it is a brilliant tool, thank you. In settings.cfm I have set the settings.UserFilesURL to our test site before it's launched to "http://mytestsite.com/UserFiles" so client can upload images etc.. When an image is inserted it'll have the source as "http://mytestsite.com/UserFiles/image1.jpg".
My problem is if we move the site to the 'live' domain when launching it like "http://mylivesite.com/UserFiles/image1.jpg then the image is not visible until we change the domain name. Does that mean we have to do that with all images inserted ?
I've probably overlooked something.
Any help would be appreciated.
Sam
Tuesday 18 November 2014 09:37 PM
I afraid so. The path get inserted into your post and they stay there. Of cause you can write a small script to update your post with a search and replace once you move into production. There is no way I can avoid this without make the plugin really complicated.
Irv
Tuesday 14 October 2014 01:39 PM
Hi! Thanks for the plugin. Trying to implement it on a Windows server running Coldfusion 9, but no luck so far. Followed the instructions, copied the "filemanager" folder to the TinyMCE plugins folder. Added paths to settings file. Added js code to calling page. Editor shows up, plugin button/icon shows up, but nothing happens, no browser or dialog window opens. Tried a lot of possible things and double-checked all paths. BTW, I had to re-name the plugin.js file to plugin.min.js as suggested by some other poster in order for TiniMCE to recognize the plugin.

Hope somebody can provide some pointers. Once again, thanks for this nice contribution - looking forward to implementing this nice plugin!
Sam
Saturday 18 October 2014 12:28 PM
Please turn on firebug and go to console.. You should see the error. Could you send me the error message?
Irv
Monday 20 October 2014 08:22 AM
Thanks a lot, Sam, for the reply. It's much appreciated. Managed to solve the problem by using a locally-stored JQuery script (instead of the Google repository). Don't know why, but it solved the problem for me.

I'm now trying to modify the plugin to act more like MS Word in the sense that users could select some text, browse to a file and have the link returned showing the selected text (linked, of course) instead of the file name.

Kevin
Monday 29 September 2014 11:08 PM
I'd like to be able to resize the modal window the filemanager uses. It's just too big for my needs. Is there somewhere I can make this change? I tried in a couple places, but didn't work the way I would have expected.

Thanks for the ColdFusion plugin, by the way. I couldn't get any of the PHP file managers to work on my Windows server.
Sam
Thursday 02 October 2014 09:16 AM
Try like 140-156 in tinymce/plugins/filemanager/filemanager.js
That keep the window 80px less than the window size. If the window is less than 800px, it remains at 800px.
Kevin
Saturday 27 September 2014 02:42 PM
This simply will not run on IIS. I've tried everything I can think of. Am I missing something?
Kevin
Monday 29 September 2014 11:02 PM
I got it to work by NOT using the jquery version of Tinymce. I used tinymce.min.js, and renamed plugin.js to plugin.min.js. Works great, now.
Jessie
Friday 26 September 2014 08:02 PM
Hi;

I was trying to implement this plugin, I was able to add the tool bar but when i click it, it just opens an empty lightbox with "My files Home" on the header but the content is empty. Any idea?

Thanks;
Matthew
Friday 25 July 2014 08:56 AM
Hi Sam, thankyou for taking the time to create this plugin.

I am trying to implement this into my tinymce installation but I cannot see any files when I open the file manager. I have opened firebug in firefox and found an error "Uncaught ReferenceError: Begin is not defined "

I can upload files succesfully but they don't appear the browser doesn't list any files ??

Please can you help, or offer some advice :-)
Matthew
Tuesday 29 July 2014 04:37 AM
Hi Sam, it was something in our application that was causing problems. Working great now and it is so fast. Superb work, thankyou again :-)
Jan
Friday 07 February 2014 08:38 AM
Hi there,

As all said - great plugin - the only problem is that I too am having the issue with the window not closing or images being inserted when I click on the file size required. All the query effects seem to be working well aside from these things.

I have downloaded the latest version from here but still no joy!

Thanks

Jan
Sam
Wednesday 12 February 2014 08:54 PM
It is looks like the TinyMCE 4.0b2 is having this issue. Try the new version and also make sure to use the jQuery version.
Sam
Wednesday 12 February 2014 08:54 PM
It is looks like the TinyMCE 4.0b2 is having this issue. Try the new version and also make sure to use the jQuery version.
Sam
Sunday 09 February 2014 09:14 AM
Do you have this online some where, so I can have a look?
Sam
Monday 10 February 2014 07:08 PM
Sure. use the right side box or mail to sam @ cflove.org

Jan
Monday 10 February 2014 04:06 AM
I do but I can't let it be known publicly - can I email you directly?

Elmore
Monday 20 January 2014 07:30 AM
When I add "filemanager" to the list of plugins to load, it breaks the editor. I get a blank box where the editor previously appeared. I don't see any relevant js errors either. Followed your readme exactly. Any ideas?
Elmore
Monday 20 January 2014 12:25 PM
Ok, you should include a plugin.min.js file in your filemanager folder because that's what tinymce was looking for by default. I just renamed the plugin.js file and got the plugin to load that way. FYI
Sam
Monday 20 January 2014 07:46 PM
Thanks for that info.

Muhamad Wahyu
Thursday 16 January 2014 01:04 PM
I think this plugin is very awesome,
but whether this plugin supports the TinyMCE version 4.0.11?
because I found an error
site-directory<dot>com / tinymce / js / tinymce / plugins / filemanager / plugin.min.js - 404 (Not Found)

so is there someone who can help me ...
Regards.
Sam
Friday 17 January 2014 11:57 AM
Can you please give me the link, so i can have a look? This support 4.0.11
djjjozsi
Tuesday 07 January 2014 02:40 AM
What if i don't have a ColdFusion enviroment? A little notification would be great :" Not to use if you don't have ColdFusion. Regards.
d
Wednesday 08 January 2014 05:27 AM
So the title "ColdFusion File Manager for TinyMCE 4" is not enough for you?
Nithin K
Tuesday 10 December 2013 06:00 AM
The UI just wow :), by the way can it be used in Rails ?
Sam
Tuesday 10 December 2013 10:29 AM
Thanks. Yes.
Sam
Monday 03 February 2014 08:28 AM
Sorry. My mistake. This do not run on Rails. I read this as Railo.

nithin
Monday 03 February 2014 08:17 AM
ColdFusion enviroment, is it necessary ? I'm trying out on rails 2, i'm finding the content of index.cfm on the pop up box :( what is the problem i'm running to?

Rob
Wednesday 13 November 2013 03:12 PM
Below "D" says "the jquery version of tinymce is required" I have the quick tinymce implementation but this doesnt work...how do I get the jquery version?

Thanks.
Sam
Thursday 14 November 2013 09:25 AM
Go to tinyMCE site, Download from the top menu and click on "TinyMCE 4.0.10 jQuery package" (as per today). If you have any trouble implementing it, look at the source code of the [demo] link above.
Rob
Thursday 14 November 2013 05:58 PM
I think something's changed...the download has only "jquery.tinymce.min.js" while the source code of the demo is utilizing "tinymce.jquery.js" when I put the same code in demo, but utilizing the "jquery.tinymce.min.js" it stays blank see: aguzao.com/tiny.cfm

Any ideas?

Rob
Thursday 14 November 2013 10:13 PM
NM got it, you don't need the jquery version of TinyMCE, I downloaded the normal 4.0.10 version and just pulled the js of tinymce.min.js and code.jquery.com/jquery-1.10.2.min.js in the header; worked great! Thank you so much for taking the time to build this. You should get a donate button I'm sure most of us would send some gratitude your way.

Angel
Monday 11 November 2013 08:06 PM
I'm sorry guys, I consider myself a pretty decent follow instructions guy...but can you provide a link to tinymce4 implementation method I should be using? It works when i pull http://cflove.org/examples/FileManager4/js/tinymce4/jquery.tinymce.min.js but the button takes me to folders that don't exist...when I rip this .js and put it on my server no dice, when i implement using the <invalidTag src="http://tinymce.cachefly.net/4.0/tinymce.min.js"> way no go either...appreciate any link or point in the right direction.

Thanks.
asep
Friday 08 November 2013 02:10 AM
this is running on php? because after all the steps are the same but it does not appear
appears script index.cfm like use tag 
, please tell me why. 

thanks
	

	
			
			
		
	

		
		
		
			

			


	
	
	

	
	Jamie Martin

	
Friday 08 November 2013 06:55 AM

	

	
	
	It runs on coldfusion,  not php.
	

	
			
			
		
	

			
				
			

		
		
	


	

		


	
	
	

	
	Jamie Martin

	
Tuesday 22 October 2013 07:35 AM

	

	
	
	I've got basic implementation working, but when I go to the file browser, and click on an item to "insert" it, nothing happens.  I'm not seeing any console errors, and the config seems sound.  I also am seeing that the close dialog X isn't working.... any ideas on where to start?
	

	
			
			
		
	

		
		
		
			

			


	
	
	

	
	Jamie Martin

	
Tuesday 22 October 2013 07:53 AM

	

	
	
	On further inspection it appears that the close functionality is lost after I attempt to do an Insert of any file/image.
	

	
			
			
		
	

			
				
				
				

				


	
	
	

	
	D

	
Tuesday 22 October 2013 08:02 AM

	

	
	
	I don't know if that's your issue or not but in my case, I had issues with both Chrome and Firefox not running the script because it was pointing to the CDN jquery library and I had to tell both browsers to explicitly run the script because they wouldn't run it by default.
	

	
			

		
	

				

				
				
			

		
			

			


	
	
	

	
	Jamie Martin

	
Tuesday 22 October 2013 08:04 AM

	

	
	
	Think i've narrowed it down a bit, seems when I have  multiple editors on the screen (I have a page with 5 of them), then the file uploader doesn't know which editor to push the image back to, and goes to the last one on the page no matter where you initiated the file insertion from.  Is this a resolvable issue, or does the file manager not work with multiple TinyMCE editors on a single page?
	

	
			
			
		
	

			
				
				
				

				


	
	
	

	
	Jamie Martin

	
Monday 18 November 2013 03:21 AM

	

	
	
	EXCELLENT!!  Works flawlessly now.  Much thanks, and great support.  Thanks so much.  You really need a donate button! :-)
	

	
			

		
	

				

				
				

				


	
	
	

	
	Sam

	
Saturday 16 November 2013 10:24 PM

	

	
	
	Fix uploaded. Give it a try please.
	

	
			

		
	

				

				
				

				


	
	
	

	
	Jamie Martin

	
Thursday 14 November 2013 06:16 PM

	

	
	
	Any new news on this issue?
	

	
			

		
	

				

				
				

				


	
	
	

	
	Jamie Martin

	
Tuesday 22 October 2013 09:21 AM

	

	
	
	Thanks much.
	

	
			

		
	

				

				
				

				


	
	
	

	
	Sam

	
Tuesday 22 October 2013 09:15 AM

	

	
	
	I will look into this issue. Thanks for bringing it up.
	

	
			

		
	

				

				
				

				


	
	
	

	
	Jamie Martin

	
Tuesday 22 October 2013 08:56 AM

	

	
	
	I've got all that working, the problem is when there are multiple editors on the origin screen, the filemanager only inserts items in the last one on the page, and if you initiated it from one other than the last one it locks the filemanager modal open and it can't be closed w/ the X.
	

	
			

		
	

				

				
				

				


	
	
	

	
	D

	
Tuesday 22 October 2013 08:29 AM

	

	
	
	Let's try this again: "invalidtag" should be "script". Sam, please add functionality to add code in the comments unless I'm doing something wrong here.
	

	
			

		
	

				

				
				

				


	
	
	

	
	D

	
Tuesday 22 October 2013 08:27 AM

	

	
	
	I just noticed posting code on the comments seems to bork it up. The "invalidTag type=" in the example below should be replaced with "<invalidTag type="
	

	
			

		
	

				

				
				

				


	
	
	

	
	D

	
Tuesday 22 October 2013 08:20 AM

	

	
	
	Here's my code that works in my case. I do not use the CDN jquery library. I have a local version which of course differs from the examples. As you can see, I have uploaded tinymce into a tinymce4 folder and I uploaded the filemanager plugin into the plugins folder and of course configured it for my environment. In the settings.cfm I didn't use the #expandpath# function but instead I explicitly specified the file location (/var/www/filesfolder).  Also, this is very important because the docs of the filemanager plugin do not seem to make it very clear that the jquery version of tinymce is required. Anyways, the code below is all on the <HEAD> section of the page:



<HEAD>

<invalidTag type="text/javascript" src="tinymce4/jquery-1.10.2.min.js">

<invalidTag type="text/javascript" src="tinymce4/tinymce.jquery.js">



<invalidTag type="text/javascript">

tinymce.init({

    selector: "textarea",

    font_formats: "Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;AkrutiKndPadmini=Akpdmi-n",

    toolbar: "filemanager undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | fontselect fontsizeselect | textcolor forecolor backcolor",

    plugins: [

        "filemanager advlist autolink lists link image charmap print preview anchor",

        "searchreplace visualblocks code fullscreen",

        "insertdatetime media table contextmenu paste textcolor"

    ]

    

    //,fileManager_path : "TinyMCE/plugins/FileManager/index.cfm"

});



</HEAD>



Notice the selector is "textarea". This of course will take any text area and insert tinymce 4 editor.  Additionally, ensure you download the latest version of the filemanager plugin for tinymce 4 because the version from a couple of weeks ago had a corrupted upload.cfm file. In your case I would definitely disable any other editors from your page.



Hope this helps.
	

	
			

		
	

				

				
				
			

		
		
	


	

		


	
	
	

	
	Dino

	
Sunday 06 October 2013 10:22 AM

	

	
	
	I did that and on the bottom of the page I see a textarea with the letters CC in them. Which is exactly what I see when I open upload.cfm. There is no other comment
	

	
			
			
		
	

		
		
	


	

		


	
	
	

	
	Dino

	
Saturday 05 October 2013 11:35 PM

	

	
	
	Hi, I was able to get the filemanager to work mostly but uploads are not working. I browse to my local drive, choose a file click the Upload button and it just sits there with the progress bar going but never finishes uploading. Any ideas?
	

	
			
			
		
	

		
		
		
			

			


	
	
	

	
	Sam

	
Sunday 06 October 2013 10:22 AM

	

	
	
	I found upload.cfm file was corrupted. New file uploaded. Thanks for letting me know.
	

	
			
			
		
	

			
				
				
				

				


	
	
	

	
	Dino

	
Sunday 06 October 2013 12:37 PM

	

	
	
	That seemed to have fixed. Uploads are working now. I'll let you know if any more problems. Thanks for your hard work to provide a great product.
	

	
			

		
	

				

				
				
			

		
			

			


	
	
	

	
	Sam

	
Sunday 06 October 2013 10:04 AM

	

	
	
	Open tinymce/plugins/filemanager/index.cfm, go to all the way to the end of the page and un-comment line 92 that have an iframe. Comment the line 91 that is also an iframe. This will make file upload action page visible to you and will show the actual cfm error behind this. Most common cause of this is large file size that got rejected by web server or CFM or wrong path.
	

	
			
			
		
	

			
				
				
				

				


	
	
	

	
	Dino

	
Sunday 06 October 2013 10:22 AM

	

	
	
	I did that and on the bottom of the page I see a textarea with the letters CC in them. Which is exactly what I see when I open upload.cfm. There is no other comment