A Simple ColdFusion Image Manager for TinyMCE
Tuesday 22 November 2011 10:02 AM
I was listening to Ray Charles while coding on my blog application. I was trying to improve the blog using a beautifully developed tinyMCE Editor when I realized I needed a simple image manager to go with it. There is ColdFusion File Manager, a wonderful application with lots of functions, but I wanted something simpler––just images and some thumbnails, if that was possible. I wrote a simple bit of coding with the help of JQuery. Here it is.
Here is the code needed to add the Image Manager into tinyMCE
1: <textarea id="blog" name="myTextArea" style="height:150px; width:90%"></textarea> 2: <script type="text/javascript"> 3: tinyMCE.init({
4: // General options 5: mode :
"textareas",
6: theme :
"advanced",
7: elements :
"myTextArea",
8: file_browser_callback :
"imgManager" 9: }
);
10: 11: function
imgManager(f, u, t,w
) {
12: url =
"http://cflove.org/examples/ImageManager/ImageManager/index.cfm" 13: mainwindow = w;
14: imgManagerPopup =
window.open(url,
"",
"width=700,height=500,left=20,top=20,bgcolor=white,resizable,scrollbars,menubar=0");
15: }
16: </script> The first ten lines of the code above are for inserting tinyMCE editor into the
my textarea field. (
You can find more information about that at the tinyMCE site.)
The tinyMCE setup argument
file_browser_callback defines the external JavaScript function so that it calls when you click on the icon
. I set that argument to
imgManager You can find the
imgManager Javascript function at line 11, which simply opens the Image Manger Application in a popup window. At line 12, I provided the URL for my Image Manager Location, so you should change that to your own application URL.
I would be love to say that this is the only change you have to make to get this function to work in a production environment, but it’s not. I am happy to say that you can at least test the downloaded file without changing any of the settings, paths, or other annoying things.
When you use this function in a production environment, you may want to open the
index.
cfm file inside the
ImageManager folder. Then you will change the variable [imgFolder] to the physical path of the folder where you want your uploaded images stored. You will also change the variable [imgURL] to the URL of the same folder.
In addition, you may want to add some sort of user validation on top of the
act_delete.cfm file and the
image.cfm file, just to be sure no unauthorized users will have access to the uploaded images. Although if you are like me, and believe in the good nature of all Homo sapiens, you can leave it open like I did in example above.
Update (Nov 22, 2011) : ImageManager\index.cfm updated to fix JavaScript error.
Download (ImageManager.zip)
Posted by Saman W Jayasekara at Saturday 26 June 2010 11:08 PM
on Wednesday 18 April 2012 11:09 AM
Wow thanks, this is very handy. I was in a situation where I was using CKEditor and CKFinder which was great, but a copy and paste from Excel was causing a minor but important issue. I was working my way through trying to get CKFinder to connect up and it was a pain, so I was considering if it was worth writing my own and did a quick search. Turned this up, got it running in 5 minutes. Big time saver and much appreciated!
Colin
on Thursday 23 February 2012 05:35 PM
Hi Saman, Thank you for this script :)
"When you use this function in a production environment, you may want to open the index.cfm file inside the ImageManager folder. Then you will change the variable [imgFolder] to the physical path of the folder where you want your uploaded images stored. You will also change the variable [imgURL] to the URL of the same folder."
What do I put in the code (and where in index.cfm) when my folder is www.mysite.com/images/uploads ?
Cheers
Colin
on Friday 24 February 2012 11:14 AM
When you download the zip file, open up the [ImageManager\index.cfm] file and edit the line 13. That's the physical path to where you host your images at. (e.x :c:\webserver\mywebsite\images\uploads). after that all you have to do is, link to ImageManager\index.cfm from your tinymce (look at the above code box in his post , line 12). Please feel free to drop me an note if you have any questions
Johny
on Thursday 08 December 2011 01:43 PM
Hi, I've a problem whith menager. When I open menager i see source code of index.cfm file. How can I fix it?
on Saturday 10 December 2011 09:17 PM
Do you have ColdFusion server running in your machine?
Jean-Pierre
on Monday 21 November 2011 12:34 PM
In you demo above when I end up with the window with the "My images" and "Add images" links on top nothing happens when I click "Add images". I have Windows 7 and I've tried it with Firefox and MS Internet Explorer.
on Tuesday 22 November 2011 10:25 AM
Seems like TinyMCE ver used in the demo stopped working. Updated it. Found a other error in the main files while investigating this. Thanks!
Sam
on Friday 09 September 2011 08:45 AM
Just check line 25 in the index.cfm, variable [#pathtohere#] generated correctly. You can manually add the url there. Are you on Railo?
Tomasz
on Friday 09 September 2011 05:23 AM
I am getting empty window when I click "Browse" icon. Is it index.cfm configuration fault?
Kyle Eggleston
on Saturday 16 April 2011 10:11 PM
Awesome! Been working on a site and I def need this... very nice!
Adam Bertram
on Tuesday 20 July 2010 10:25 AM
Sweet!! Was just looking for something like this!
Show/Hide Line Numbers . Full Screen . Plain
